若依根据角色权限动态添加路由学习

news2024/10/12 3:17:17

源于这个问题对若依权限改造的学习，用ASP.NET Core Web api 做后端，所以不是纯净的若依前端，有部分改过。

若依从字典类型跳到字典数据跳到了404-CSDN博客

从路由守卫获取到用户信息开始，到路由跳转结束的过程

大致逻辑

路由守卫获取用户信息

存用户信息

路由筛选

跳转

过程

路由守卫获取用户信息

router.beforeEach((to, from, next)调用存用户信息的方法

//在路由守卫
store.dispatch('GetInfo').then(() =>...

用户信息存储

...\src\store\modules\user.js

包括存用户信息，用户所拥有的权限，角色

注意这里权限和角色都是数组，因为一个用户可以具有多个角色

主要是将获取到的用户信息存到vuex里

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        //根据角色获取相应权限,由token判断用户所属角色
        getInfo().then(res => {
          
          const user = res.data
          const avatar = (user.avatarUrl == "" || user.avatarUrl == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatarUrl;
          
          if (res.data.roleNameList) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', res.data.roleNameList)
            // commit('SET_PERMISSIONS', res.permissions)
            commit('SET_PERMISSIONS', res.data.userPower)
          } else {
            commit('SET_ROLES', ['ROLE_DEFAULT'])
          }
          commit('SET_ID', user.userId)
          commit('SET_NAME', user.userName)
          commit('SET_AVATAR', avatar)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },

路由筛选

在...\src\store\modules\permission.js

路由守卫在调完存用户信息的方法会调生成路由表的方法GenerateRoutes()

主要是这个方法，它会根据预先定义好的路由表把动态路由给筛选好

// 动态路由遍历，验证是否具备权限
export function filterDynamicRoutes(routes) {
  const res = []
  routes.forEach(route => {
    //按权限验证

    if (route.permissions) {//路由要有权限标识，及用户对应的角色权限里面也要对应有
      if (auth.hasPermiOr(route.permissions)) {
        res.push(route)
      }
    } else if (route.roles) {//按角色验证
      if (auth.hasRoleOr(route.roles)) {
        res.push(route)
      }
    }
  })
  return res
}

筛选逻辑：

先根据权限判断，如果路由表有权限标识permissions，则会进第一个判断，其中第二个if则是调用...\src\plugins\auth.js中的方法来判断在之前存好的用户权限是否有相应权限，有则添加该路由。

else if (route.roles)同理如果路由有角色标识roles则会进来，其余判断逻辑差不多，

注意：

这方法是先判断有没有permissions，如果有这个字段但没相应权限，则不会添加，就算有相应角色也是。这是考虑到了同样的角色可能会有不同权限的情况。

  {
    path: '/system/dict-data',
    component: Layout,
    hidden: true,
    permissions: ['PRIV_DICTDATA_VIEW'],
    children: [
      {
        path: 'index/:id',
        component: () => import('@/views/system/dict/data'),
        name: 'Data',
        meta: { title: '字典数据', activeMenu: '/system/dict' }
      }
    ]
  }

...\src\plugins\auth.js角色/权限判断：

function authPermission(permission) {
  const all_permission = "*:*:*"; // 定义一个表示通配权限的常量 "*:*:*"，通常表示拥有所有权限
  const permissions = store.getters && store.getters.permissions; // 获取用户的权限数组，如果 store.getters.permissions 存在，则赋值给 permissions
  if (permission && permission.length > 0) { // 如果传入的权限不为空且有长度（确保有效权限参数）
    return permissions.some(v => { // 使用 some() 方法检查用户权限数组中是否有匹配项
      return all_permission === v || v === permission; // 如果用户具有通配权限或具有指定的具体权限，则返回 true
    });
  } else {
    return false; // 如果传入的权限参数无效，返回 false，表示没有权限
  }
}

function authRole(role) {

  const super_admin = "系统管理员"; // 定义超级管理员角色常量 "admin"，通常拥有所有角色权限
  const roles = store.getters && store.getters.roles; // 获取用户的角色数组，如果 store.getters.roles 存在，则赋值给 roles
  if (role && role.length > 0) { // 如果传入的角色不为空且有长度（确保有效角色参数）
    return roles.some(v => { // 使用 some() 方法检查用户角色数组中是否有匹配项
      return super_admin === v || v === role; // 如果用户是超级管理员或具有指定的角色，则返回 true
    });
  } else {
    return false; // 如果传入的角色参数无效，返回 false，表示没有该角色
  }
}