流程
api统一管理
在api/index.js中编写登录请求
所有的请求都写在这个文件中,以方便api统一管理
1 2 3
|
export const reqUserLogin = (data)=>requests({url:'/user/login',data,method:'post'});
|
在login.vue中实现简单的登录操作
1 2 3 4 5 6
| methods: { login() { const {username,password} = this; (username&&password)&&this.$store.dispatch('userLogin',{username,password}); } },
|
在user模块中实现登录请求和回调函数获取token
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| import {reqUserLogin} from '@/api' const state={ token:'', }; const mutations = { USERLOGIN(state, token) { state.token = token; } }; const actions = { async userLogin({commit}, obj) { let {data} = await reqUserLogin(obj); console.log(data.msg); if (data.code == 200) { commit("USERLOGIN", data.msg); return "ok"; } else { return Promise.reject(new Error("failure")); } }, }; const getters = {}; export default { state, mutations, actions, getters }
|
在之后的请求中可以带上token去获取用户信息,实现安全原则。