经过上面的操作，我们将用户登录中调用登录接口的操作通过vuex实现，将成功登录后的用户名保存在vuex中，此时的token保存在浏览器本地。但是vuex中的数据并不是持久数据，刷新之后保存的用户名就会消失，接下来我们实现刷新页面或者路由跳转时进行用户校验，如果验证通过则会生成新的token和username并保存。
4.vuex配合vue-router实现登录校验
当用户刷新页面时，或者点击其他页面切换路由router时，需要调用后端的validate接口，该接口通过验证已保存的token校验当前用户是否合法。我们在vuex的store.js中添加以下代码：
export default Vuex.store({ state: { username: '', }, mutations: { setUsername(state, username){ state.username = username; } }, actions: { async login({commit}, username){ ... }, async validate({commit}) { // 调用userValidate时，会将 const res = await userValidate(); if (res.code === 1) { // 此时用户校验失败 return Promise.reject(res); } // 如果校验成功，重新保存token和username localStorage.setItem('token', res.token); commit('setUsername', res.username); } } });
基本上我们通过上面的代码就实现了用户权限控制所需要的所有前提操作：
用户成功登陆在本地保存token
在自己封装的ajax的请求头部添加保存的token信息
后端服务提供对前端token的校验能力
那么接下来就就是路由router刷新或改变的时候如何进行权限控制了。
5.vue-router钩子实现用户权限控制
使用过vue-router的同学们都知道，路有也是有钩子函数的，在官方文档里面被称为 导航守卫 。导航守卫允许我们可以精准的在每个路由变化的时候进行操作，我们就这里判断用户权限。在vue项目的的main.js中修改：
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 在这里使用路由的导航守卫进行权限控制 // 可以自定义不需要校验用户的路由白名单 const whiteList = ['https://www.jb51.net/']; router.beforeEach(async (to, from, next) => { // 要去的页面是白名单，直接跳转 if (whiteList.includes(to.path)) { next(); } // 不是白名单，调用vuex中的validate行为 const flag = await store.dispatch('validate'); if (flag) { // 用户校验通过，直接跳转 next(); } else { // 用户校验失败 next('/login'); // 跳转至用户登陆页 // 顺带说一下，这里还可以在router中的meta属性中添加isNeeded: true/false // 然后配合这个属性更加精细的控制未通过用户校验时的页面是否允许跳转 } }); // vuex Vue.use(ElementUI); Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App), }).$mount('#app');
总结
以上所述是小编给大家介绍的vue-router结合vuex实现用户权限控制，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: