vue权限控制
在 SPA（单页面应用）中，前端需要根据用户的权限来控制用户菜单以及路由表，vue-router提供了几个路由生命周期钩子，叫做路由守卫，我们可以利用路由守卫在路由以及路由元信息进行权限控制，同时搭配 vuex 将会更美味，文末有完整示例地址。 登录权限 登录验证是最常见的一种路由权限验证，使用vuex + 路由守卫可以实现比较清晰流畅的鉴权流，能轻松应对页面刷新、清除缓存等场景。 路由元信息 vue-router在构建路由时提供了元信息meta配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。 // router.js // 路由表元信息 ;[ { path: '', redirect: '/home', }, { path: '/home', meta: { title: 'Home', icon: 'home', }, }, { path: '/userCenter', meta: { title: '个人中心', requireAuth: true, // 在需要登录的路由的meta中添加响应的权限标识 }, }, ] // 在守卫中访问元信息 function gaurd(to, from, next) { // to.matched.some(record => record.meta.requireAuth) // 可在此处 } vuex 一般的，用户登录后会在本地持久化存储用户的认证信息，本文以JWT的token为例。将用户的 token 持久化到 localStorage 里，而用户信息则存在内存(store)中。这样可以在 vuex 中存储一个标记用户登录状态的属性auth，方便用语权限控制。 // store.js { state: { token: window....