目录结构(根目录开始)
├── api # 所有请求
│ └── user.js # 用户请求api
├── store # 全局store管理
│ └── modules # api模块
│ │ └── user.js # 用户请求模块
│ └── index.js # 状态管理初始化
├── utils # 全局公用方法
│ ├── auth.js # 本地缓存
│ ├── env.js # 公共参数
│ └── request.js # 网络请求中间件
└── main.js # 入口文件 加载组件 初始化等
下面是文档内容
api/user.js(用户请求api)
// 引用网络请求中间件
import request from './../utils/request';
/**
* 登陆请求
*/
export function login(data) {
return request({
url: '/user/login',
method: 'POST',
data
})
}
store/modules/user.js(用户请求模块)
// 引用用户请求api
import {
login} from '../../api/user';
import {
setToken} from '../../utils/auth';
//下面我是示例的微信小程序的参数，可自行修改请求参数
const actions = {
login({
commit}, param) {
return new Promise((resolve, reject) => {
login({
iv: param.iv, // 请求参数(可自行修改)
code: param.code // 请求参数(可自行修改)
}).then(response => {
// 这里可以自己添加方法
// 保存获取到的token到本地之类的
// 必须在resolve之前执行
setToken(response.token) //将获取到的token保存到本地
resolve(response)
}).catch(error => {
console.log(error)
})
})
}
};
export default {
namespaced: true,
actions
}
store/index.js(状态管理初始化配置)
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
}
});
export default store
utils/auth.js(本地缓存配置)
const TokenKey = 'token';
// 认证令牌
export function getToken() {
return uni.getStorageSync(TokenKey)
}
export function setToken(token) {
return uni.setStorageSync(TokenKey, token)
}
export function removeToken() {
return uni.removeStorageSync(TokenKey)
}
utils/env.js(公共参数)
"use strict";
// 变量可自行添加修改
export default {
//存放变量的容器
appid: '****',
baseUrl: 'http://**.***.***.***'
}
/**
* appid : 小程序appid
* baseUrl : 服务端域名
*/
utils/request.js(网络请求中间件)
import {
getToken,removeToken} from '../utils/auth';
import env from '../utils/env';
function service(options = {
}) {
options.url = `${
env.baseUrl}${
options.url}`;
// 判断本地是否存在token，如果存在则带上请求头
if (getToken()) {
options.header = {
'content-type': 'application/json',
'Authorization': `${
getToken()}` // 这里是token(可自行修改)
};
}
return new Promise((resolved, rejected) => {
options.success = (res) => {
// 如果请求回来的状态码不是200则执行以下操作
if (res.data.code !== 200) {
// 非成功状态码弹窗
uni.showToast({
icon: 'none',
duration: 3000,
title: `${
res.data.msg}`
});
// 登陆失效
if (res.data.code === 403) {
// 清除本地token
removeToken()
// 关闭所有页面返回到登录页
uni.reLaunch({
url: '/pages/login/login'
})
}
// 返回错误信息
rejected(res)
} else {
// 请求回来的状态码为200则返回内容
resolved(res.data.data)
}
};
options.fail = (err) => {
// 请求失败弹窗
uni.showToast({
icon: 'none',
duration: 3000,
title: '服务器错误,请稍后再试'
});
rejected(err);
};
uni.request(options);
});
}
export default service;