1.登陆的时候,在登陆模块请求接口,然后获取一个access_token,获取用户权限.保存到缓存里面。
2.退出的时候,请求退出接口,把缓存里面的access_token清除。
一旦要在登陆里面做一些行为,比如,在后面新加一些数据传递给登陆接口,做数据收集。就要在登陆的Login.vue模块
里面直接修改。模块里面的代码很多。所有的逻辑都混在一起。
所以可以把登陆和退出的变量和行为抽离出来,在状态管理里统一管理。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
把退出,登陆的模块都封装在一个状态模块上面
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态
对用户权限判断是否可以进入某个页面的时候,统一在路由钩子里进行执行。
比如 登陆进首页,需要判断用户权限,从别的页面进首页,仍然要判断用户权限。
如果页面进入分别写在登陆页面,和别的页面,代码就不好维护,都在vue路由的导航守卫里面进行处理
登陆异步代码 ,和login模块里面的回调。
state状态管理里面, mutations是立即执行的,actions 可以是异步的,所以用actions。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const loginSet = { state: { access_token: null }, mutations: { setAccessToken(state, param){ state.access_token = param.value; } }, actions: { loginAsync({ commit }){ return new Promise((resolve, reject)=>{ setTimeout(()=> { commit({ type: 'setAccessToken', value: 'ajshdksjjsd' //我随便写了几个值 }); resolve(); }, 1000) }); } }, getters: { } }; const store = new Vuex.Store({ modules: { login: loginSet } }) export {store};
登陆模块的调用,异步回调
this.$store.dispatch('loginAsync').then(()=>{ //如果登陆成功了以后,回调 console.log(this.$store.state.login.access_token); this.$router.push('首页'); });