如何给用户添加权限

做了一个分用户权限访问的简单路由管理，最开始查阅了很多大佬的博文，但是总是数据丢失，疯狂写了好多log输出才找到问题出在哪里，记录一下吧，需要说明一下的我写的只是部分代码，可能有遗漏，但是只是我没写在博文里，项目我是运行成功了的，但是因为融合了前后端，还有我的其他项目所以不能全放就是了，仅供参考，加上一些我自己踩的坑，着重修改的部分，我也是前端小白的说，大佬们轻喷（其实也不会有人看这个吧），参考文献放在前面，

$前端实现：不同角色登入展示不同页面效果$ (https://blog.csdn.net/m0_74824687/article/details/144729934)

$[手摸手，带你用vue撸后台](https://segmentfault.com/a/1190000009275424 "手摸手，带你用vue撸后台")$ (https://segmentfault.com/a/1190000009275424)

需求是，使用管理员访问的时候能看到其他页面和用户管理页面，使用其他普通用户访问的时候只有其他页面，看不见用户管理页面

首先就是vue前端页面

导航栏上加上v-if

复制代码

<router-link to="/admin" class="nav-item" v-if="isAdmin">用户管理</router-link>

加了一个role功能，因为我设定是管理员和技术部的人员可以查看，其他部门都是普通用户。

html 复制代码

const isAdmin = computed(() => {
  if (authStore.role) {
    return authStore.role === 'admin';
  }
  // 从localStorage获取角色信息
  const role = localStorage.getItem('role');
  return role === 'admin';
});

接着是router

router/index.js里面加上路由拦截

html 复制代码

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  const expiresAt = localStorage.getItem('expiresAt');
  const role = localStorage.getItem('role');
  
  const isAuthenticated = token && expiresAt && new Date().getTime() < new Date(expiresAt).getTime();
  const isAdmin = role === 'admin';

  if (to.meta.requiresAuth && !isAuthenticated) {
    return next('/login');
  }

  if (to.path === '/login' && isAuthenticated) {
    return next('/');
  }

  if (to.meta.requiresAdmin && !isAdmin) {
    alert('您没有权限访问该页面');
    return next('/');
  }

  next();
}

并且让分用户访问时初始化前端路由系统，重新渲染导航栏

html 复制代码

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes  
});

我映射的逻辑，分成两种角色

html 复制代码

    mapDepartmentToRole(department) {
      if (typeof department !== 'string') return 'editor';
      const normalized = department.trim();
      if (normalized === '管理员' || normalized === '技术部' ||
        normalized.toLowerCase() === 'admin') {
        return 'admin';
      }
      if (normalized === '管理部' || normalized === '运维部' ||
        normalized === '销售部') {
        return 'editor';
      }
      // 默认普通用户
      return 'editor';
    },

然后是后端部分

如果登录成功了获取部门字段

html 复制代码

  if (result.success) {
    res.json({
      success: true,
      token: result.token,
      username: result.username,
      department: result.department,
      expiresAt: result.expiresAt
    });
}

service里面密码匹配，匹配成功后返回的也要加部门

html 复制代码

return {
            success: true,
            token,
            username,
            department: admin.department || '管理员',
            expiresAt: new Date(expirationTime).toISOString()
          };