前端面试题46（vue路由如何根据权限动态控制路由的显示？）

在这里插入图片描述

在 Vue 中，根据权限动态控制路由的显示通常涉及到两个主要步骤：权限检查和动态路由的添加。下面是一个概括性的流程，以及如何具体实现这一功能的示例代码。

第一步：定义权限和角色

首先，你需要定义好不同的角色和它们所对应的权限。这通常在你的后端服务或者数据库中定义，并且在用户登录时返回给前端。

第二步：获取用户权限

在用户登录成功后，后端会返回一个包含用户权限的令牌或者数据。你需要将这些权限信息保存到 Vuex store 或者其他的前端状态管理器中，以便全局访问。

第三步：动态添加路由

根据用户权限，动态地向 Vue Router 中添加或移除路由。这通常在应用启动时或者用户登录后执行。

实现示例

1. 设置初始路由

在你的 router/index.js 文件中，先定义一组基础路由，这些路由对所有用户都是可见的：

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 文件中，添加一个函数来动态添加受权限控制的路由：

// 假设这是从后端获取的动态路由数据
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 来接收并存储权限信息：

// 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 中：

// login.js 或者相关组件
store.dispatch('setPermissions', response.data.permissions);

通过上述步骤，你就可以实现在 Vue 应用中根据用户的权限动态显示路由了。这确保了只有授权用户才能访问特定的页面，提高了应用的安全性。

秒客网