Vue.js中如何基于Admin权限保护路由（含Token校验代码）

第一步：给需要管理员权限的路由添加标记 #

在路由配置中，给仅管理员可访问的路由新增requiresAdmin元字段：

{
  path: "/rex",
  name: "rex",
  meta: {
    requiresAuth: true,
    requiresAdmin: true // 新增：标记该路由仅管理员可访问
  },
  component: () => import("../components/rex.vue")
},

第二步：修改路由守卫逻辑，加入管理员权限校验 #

首先确保路由文件已引入Vuex Store（路径根据你的项目结构调整）：

import store from '@/store'

然后更新router.beforeEach的校验逻辑，在登录校验通过后，额外判断管理员权限：

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token');
  // 从Vuex获取管理员状态
  const isAdmin = store.state.isAdmin;

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 先校验登录状态：未登录直接跳登录页
    if (!hasToken) {
      next('/login');
      return;
    }

    // 再校验管理员权限（如果路由要求的话）
    if (to.matched.some(record => record.meta.requiresAdmin)) {
      isAdmin ? next() : next('/403'); // 管理员放行，非管理员跳无权限页
      // 若没有403页面，也可以用next(false)阻止跳转，或跳首页：next('/')
    } else {
      // 仅需登录、无需管理员权限的路由直接放行
      next();
    }
  } else {
    // 无需登录的路由直接放行
    next();
  }
});

注意事项 #

• 要确保Vuex中的isAdmin状态已正确初始化（比如用户登录时从后端接口获取并存入Store）
• 可根据业务需求调整非管理员的跳转目标，比如弹出权限提示、返回上一页等
• 所有需要管理员权限的路由，都在meta中添加requiresAdmin: true即可

内容的提问来源于stack exchange，提问作者jibzy