vue2路由跳转rbac

### Vue2 中实现基于 RBAC 的路由跳转 为了实现在 Vue2 应用程序中基于角色的基础访问控制 (RBAC)，可以按照以下方法构建应用程序逻辑： #### 初始化 Vuex Store 和 Router 配置 首先，在应用启动时初始化 Vuex store 并定义初始状态用于存储用户信息以及动态加载的路由。 ```javascript // src/store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { user: null, permissions: [], dynamicRoutes: [] }, mutations: { SET_USER(state, user) { state.user = user; }, SET_PERMISSIONS(state, permissions) { state.permissions = permissions; }, ADD_DYNAMIC_ROUTES(state, routes) { state.dynamicRoutes.push(...routes); } }, actions: { async fetchUserInfo({ commit }) { try { const response = await axios.get('/api/userInfo'); // 假设这是获取用户信息接口 const { data } = response; commit('SET_USER', data.userInfo); commit('SET_PERMISSIONS', data.permissions || []); // 动态添加路由... } catch(error) { console.error("Failed to get user info", error); } } } }); ``` 接着创建一个函数用来生成路由器实例并允许后续修改其内部 `matcher` 属性以便于清除已注册路径[^1]。 ```javascript // src/router/index.js import Vue from 'vue'; import Router from 'vue-router'; import constantRoutes from './constant-routes'; // 定义常量路由(公共部分) Vue.use(Router); const createRouter = () => new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ ...constantRoutes ] }); let router = createRouter(); export function resetRouter() { const newRouter = createRouter(); router.matcher = newRouter.matcher; // 替换匹配器以重置路由配置 } export default router; ``` #### 设置全局前置守卫 利用导航钩子来拦截每次页面切换请求，验证是否有合法 token 存在于本地存储内，并据此决定是否继续执行下一步操作或是强制转向至登录页。一旦确认身份有效，则调用 action 获取最新权限列表并将结果存入 Vuex 中供组件读取使用[^2]。 ```javascript router.beforeEach(async(to, from, next) => { if (!localStorage.getItem('token')) { if (to.path !== '/login') { next({ path: '/login' }); } else { next(); } } else { let hasPermissions = false; if(!store.state.user){ await store.dispatch('fetchUserInfo'); // 此处假设已经成功取得用户权限信息 hasPermissions = true; } if(hasPermissions && !store.getters['dynamicRoutes'].length){ addDynamicRoutes(store); // 添加动态路由 } next(); } }); ``` #### 动态添加路由规则 当接收到服务器端传回的具体权限集合之后，可以根据这些数据筛选出符合条件的目标 URL 地址集合作为额外补充项加入到现有路由表之中；同时更新视图层所依赖的状态机变量使得左侧菜单栏能够反映出最新的变化情况[^3]。 ```javascript function addDynamicRoutes(store) { const accessedRoutes = filterAsyncRoutes(constantRoutes, store.state.permissions); store.commit('ADD_DYNAMIC_ROUTES', accessedRoutes); } ``` 这里提到的 `filterAsyncRoutes()` 函数负责依据当前用户的实际许可范围过滤掉那些不可见或无权访问的部分链接地址，只保留有效的选项作为最终呈现给前端的结果集。 #### 登录/登出路由处理 最后需要注意的一点是在用户完成退出动作后应当及时清理之前缓存在内存里的敏感资料，比如移除 Vuex 内部记录下来的个性化定制化路径以及其他关联属性等，确保下次重新进入系统前一切回到最初设定好的默认状态下运行正常。 ```javascript async logout(context) { context.commit('RESET_STATE'); // 清理state内的所有数据 localStorage.removeItem('token'); resetRouter(); // 重置路由配置 location.reload(); // 刷新浏览器使更改生效 }, ``` 上述过程展示了如何在一个典型的 Vue2 单页面应用(SPA)框架下实施基于角色的身份认证机制及其配套措施——即所谓的 Role-Based Access Control (RBAC), 让不同级别的成员能够在各自限定范围内安全地浏览受保护的内容和服务资源。