若依前端实现权限管理

前言

现在流行的前端框架很多，有若依、eladmin等框架，这些框架都是用于做后台管理的框架，既然是后台管理那么就会涉及到一个比较关键性的问题就是权限管理。

什么是权限管理？

既然是后台管理登录的人的角色可能是超级管理员、管理员、以及普通用户或者有更多的层级角色，这些不同的角色登入后台管理系统左侧导航栏的显示是不同的，实现不同角色登录后台管理系统左侧的导航栏显示不同就是实现权限管理。

很多文章都写的是后端如何实现后台管理系统，以若依框架为例来说说前端是如何实现权限管理的。

思路

1. 将用户的权限字符存入数据库，当用户登录后根据用户的登录信息获取用户的所有信息（包括用户的权限信息）存入Vuex中。

   // 获取用户信息
   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") : 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_USER', user)
         commit('SET_AVATAR', avatar)
         resolve(res)
       }).catch(error => {
        
        
         reject(error)
       })
     })