一    
    
    
  、用户角色和权限

1.前端

我们通过登陆 
    
    
    
，F12进行查看发现还有getinfo和getRouters方法
     


     


     


  ，我们发现若依在页面跳转的时候都会出现这两个方法 




 




 




 
，这其实就是我们在路由里边配置的东西 

   

   

   

，我们找到全局配置的src\permission.js下发现router.beforeEach

//全局管理路由的
     

     

     

 ，每个页面跳转的时候都要运行 router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { to.meta.title && store.dispatch(settings/setTitle, to.meta.title) /* has token*/ if (to.path === /login) { next({ path: / }) NProgress.done() } else { if (store.getters.roles.length === 0) { isRelogin.show = true // 判断当前用户是否已拉取完user_info信息 store.dispatch(GetInfo).then(() => { isRelogin.show = false store.dispatch(GenerateRoutes).then(accessRoutes => { // 根据roles权限生成可访问的路由表 router.addRoutes(accessRoutes) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 }) }).catch(err => { store.dispatch(LogOut).then(() => { Message.error(err) next({ path: / }) }) }) } else { next() } } } else { // 没有token if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单  




  




  




  ，直接进入 next() } else { next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页 NProgress.done() } } })

在其中呢可以找到GetInfo和GenerateRoutes 


  


  


  


，我们在src\store\modules\user.js中找到封装的GetInfo方法

// 获取用户信息 GetInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo().then(res => { const user = res.user const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar; if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组 commit(SET_ROLES, res.roles) commit(SET_PERMISSIONS, res.permissions) } else { commit(SET_ROLES, [ROLE_DEFAULT]) } commit(SET_NAME, user.userName) commit(SET_AVATAR, avatar) resolve(res) }).catch(error => { reject(error) }) }) },

其中使用commit将后端传递过来的角色和权限记录下来
     
     
     
，给vuex进行赋值进行一个全局存储   




   




   




   ，看到若依调用了一个getInfo方法 



 



 



 


，打开src\api\login.js找到封装的方法

// 获取用户详细信息 export function getInfo() { return request({ url: /getInfo, method: get }) }

我们知道getinfo是怎么发送的了

2.后端

直接搜索getinfo方法

@GetMapping("getInfo") public AjaxResult getInfo() { SysUser user = SecurityUtils.getLoginUser().getUser(); // 角色集合 Set<String> roles = permissionService.getRolePermission(user); // 权限集合 // 用户对表单是否拥有权限进行操作（菜单中的perms是用户能控制的权限） Set<String> permissions = permissionService.getMenuPermission(user); AjaxResult ajax = AjaxResult.success(); ajax.put("user", user); ajax.put("roles", roles); ajax.put("permissions", permissions); return ajax; }

首先通过getRolePermission方法获取到角色

public Set<String> getRolePermission(SysUser user) { Set<String> roles = new HashSet<String>(); // 管理员拥有所有权限 if (user.isAdmin()) { roles.add("admin"); } else { roles.addAll(roleService.selectRolePermissionByUserId(user.getUserId())); } return roles; }

通过用户的id查询用户角色               ，进入selectRolePermissionByUserId方法中

public Set<String> selectRolePermissionByUserId(Long userId) { List<SysRole> perms = roleMapper.selectRolePermissionByUserId(userId); Set<String> permsSet = new HashSet<>(); for (SysRole perm : perms) { if (StringUtils.isNotNull(perm)) { //获取 permsSet.addAll(Arrays.asList(perm.getRoleKey().trim().split(","))); } } return permsSet; }

发现若依用户id查询用户角色列表
    




    




    




   ，针对一个用户拥有的多个角色通过for循环

















，获取perm中的RoleKey中的值                ，trim方法去除字符串首位的空格
     



     



     



   ，并且通过split方法进行“
















，    
    
    
  ”分割 
    
    
    
，最后返回

其次通过getMenuPermission方法获取到权限 public Set<String> getMenuPermission(SysUser user) { Set<String> perms = new HashSet<String>(); // 管理员拥有所有权限 if (user.isAdmin()) { perms.add("*:*:*"); } else { List<SysRole> roles = user.getRoles(); if (!roles.isEmpty() && roles.size() > 1) { // 多角色设置permissions属性
     


     


     


  ，以便数据权限匹配权限 for (SysRole role : roles) { Set<String> rolePerms = menuService.selectMenuPermsByRoleId(role.getRoleId()); role.setPermissions(rolePerms); perms.addAll(rolePerms); } } else { perms.addAll(menuService.selectMenuPermsByUserId(user.getUserId())); } } return perms; }

使用if判断是否是管理员 




 




 




 
，管理员直接返回所有权限 

   

   

   

，不是管理员则获取他的角色来进行判断
     

     

     

 ，多个角色通过角色Id进行权限的查询  




  




  




  ，没有多个角色则通过用户ID进行查询

List<String> perms = menuMapper.selectMenuPermsByUserId(userId); Set<String> permsSet = new HashSet<>(); for (String perm : perms) { if (StringUtils.isNotEmpty(perm)) { permsSet.addAll(Arrays.asList(perm.trim().split(","))); } } return permsSet;

查询后结果处理相同 


  


  


  


，针对一个用户拥有的多个权限通过for循环
     
     
     
，获取perm中的值并且通过“   




   




   




   ，  


     


     


     
”进行分割 



 



 



 


，最后返回