面试题：Vue中如何利用路由守卫实现用户角色权限控制场景

路由配置：

在Vue Router的配置文件（通常是router.js）中，为每个路由添加一个自定义的元信息（meta）字段，用于标记该路由所需的角色权限。例如：

import Vue from 'vue';
import Router from 'vue-router';
import AdminPage from '@/views/AdminPage.vue';
import UserPage from '@/views/UserPage.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: AdminPage,
      meta: {
        requiresRole: 'admin'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: UserPage,
      meta: {
        requiresRole: 'user'
      }
    }
  ]
});

export default router;

守卫逻辑：

使用全局前置守卫router.beforeEach来检查用户角色并决定是否允许访问。

router.beforeEach((to, from, next) => {
  const currentRole = getCurrentRole();// 假设这个函数用于获取当前用户角色
  if (to.meta.requiresRole) {
    if (currentRole === to.meta.requiresRole) {
      next();
    } else {
      next({ path: '/login' });// 重定向到登录页面，因为权限不足
    }
  } else {
    next();// 如果路由没有权限要求，直接放行
  }
});

getCurrentRole函数的实现取决于你的用户认证机制。例如，如果使用JWT（JSON Web Token），可以从存储的JWT中解析出角色信息：

import jwtDecode from 'jwt - decode';

function getCurrentRole() {
  const token = localStorage.getItem('token');
  if (token) {
    const decoded = jwtDecode(token);
    return decoded.role;
  }
  return null;
}

状态管理（以Vuex为例）：

可以使用Vuex来管理用户的登录状态和角色信息。
首先，在store.js中定义状态、mutation和action：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    login({ commit }, user) {
      commit('setUser', user);
      localStorage.setItem('token', user.token);
    },
    logout({ commit }) {
      commit('setUser', null);
      localStorage.removeItem('token');
    }
  }
});

export default store;

然后在登录成功后，调用store.dispatch('login', user)，将用户信息（包括角色）保存到Vuex状态和本地存储中。在路由守卫中，可以通过store.state.user.role获取当前用户角色，优化getCurrentRole函数为：

import store from '@/store';

function getCurrentRole() {
  return store.state.user? store.state.user.role : null;
}

星途面试题库

面试题：Vue中如何利用路由守卫实现用户角色权限控制场景

知识考点

面试题答案