在 Vue 中，根据权限动态控制路由的显示通常涉及到两个主要步骤：权限检查和动态路由的添加。下面是一个概括性的流程，以及如何具体实现这一功能的示例代码。
第一步：定义权限和角色
首先，你需要定义好不同的角色和它们所对应的权限。这通常在你的后端服务或者数据库中定义，并且在用户登录时返回给前端。
第二步：获取用户权限
在用户登录成功后，后端会返回一个包含用户权限的令牌或者数据。你需要将这些权限信息保存到 Vuex store 或者其他的前端状态管理器中，以便全局访问。
第三步：动态添加路由
根据用户权限，动态地向 Vue Router 中添加或移除路由。这通常在应用启动时或者用户登录后执行。
实现示例
1. 设置初始路由
在你的 router/index.js 文件中，先定义一组基础路由，这些路由对所有用户都是可见的：
javascript">import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';Vue.use(Router);const routes = [{path: '/',name: 'home',component: Home,},// 其他公共路由...
];const router = new Router({mode: 'history',base: process.env.BASE_URL,routes,
});export default router;
2. 动态添加受权限控制的路由
在 router/index.js 文件中，添加一个函数来动态添加受权限控制的路由：
javascript">// 假设这是从后端获取的动态路由数据
const asyncRoutes = [{path: '/admin',name: 'admin',component: () => import('@/views/Admin.vue'),meta: {requiresAuth: true, // 标记这个路由需要认证},},// 其他受权限控制的路由...
];// 添加动态路由的函数
function addAsyncRoutes() {const permissions = store.getters.permissions; // 从 Vuex store 获取权限信息asyncRoutes.filter(route => {if (permissions.includes(route.meta.requiresAuth)) {router.addRoute(route);}});
}// 在应用启动时调用这个函数
addAsyncRoutes();
3. 在 Vuex store 中存储权限信息
你需要在 Vuex store 中设置一个 action 来接收并存储权限信息：
javascript">// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {permissions: [],},getters: {permissions: state => state.permissions,},mutations: {setPermissions(state, permissions) {state.permissions = permissions;},},actions: {setPermissions({ commit }, permissions) {commit('setPermissions', permissions);},},
});
4. 在用户登录后设置权限
当用户登录成功后，你应该从后端获取权限信息，并将其保存到 Vuex store 中：
javascript">// login.js 或者相关组件
store.dispatch('setPermissions', response.data.permissions);
通过上述步骤，你就可以实现在 Vue 应用中根据用户的权限动态显示路由了。这确保了只有授权用户才能访问特定的页面，提高了应用的安全性。
