vue RBAC权限控制管理

Vue权限控制

在Web系统中, 权限很久以来⼀直都只是后端程序所控制的.为什么呢? 因为Web系统的本质围绕的是数
据, ⽽和数据库最紧密接触的是后端程序.所以在很⻓的⼀段时间内, 权限⼀直都只是后端程序需要考虑的
话题.但是随着前后端分离架构的流⾏, 越来越多的项⽬也在前端进⾏权限控制

1.权限相关概念

1.1权限相关概念

后端权限

从根本上讲前端仅仅只是视图层的展示, 权限的核⼼是在于服务器中的数据变化, 所以后端才是权限
的关键, 后端权限可以控制某个⽤户是否能够查询数据, 是否能够修改数据等操作

• 后端如何知道该请求是哪个⽤户发过来的

cookie
session
token

• 后端的权限设计RBAC

用户
权限
角色

前端权限

前端权限的控制本质上来说, 就是控制前端的 视图层的展示和前端所发送的请求. 但是只有前端权
限控制没有后端权限控制是万万不可的. 前端权限控制只可以说是达到锦上添花的效果.

1.2.前端权限的意义

如果仅从能够修改服务器中数据库中的数据层⾯上讲，确实只在后端做控制就⾜够了, 那为什么越来越
多的项⽬也进⾏了前端权限的控制, 主要有这⼏⽅⾯的好处

降低⾮法操作的可能性

不怕贼偷就怕贼惦记, 在⻚⾯中展示出⼀个 就算点击了也最终会失败 的按钮, 势必会增加有⼼者
⾮法操作的可能性

尽可能排除不必要请求,减轻服务器压⼒

没必要的请求, 操作失败的请求, 不具备权限的请求, 应该压根就不需要发送, 请求少了, ⾃然也会减
轻服务器的压⼒

提⾼⽤户体验

根据⽤户具备的权限为该⽤户展现⾃⼰权限范围内的内容，避免在界⾯上给⽤户带来困扰, 让⽤户
专注于分内之事

2.前端权限控制思路

2.1.菜单的控制

在登录请求中, 会得到权限数据, 当然, 这个需要后端返回数据的⽀持. 前端根据权限数据, 展示对应的菜
单.点击菜单,才能查看相关的界⾯.

2.2.界⾯的控制

如果⽤户没有登录,⼿动在地址栏敲⼊管理界⾯的地址, 则需要跳转到登录界⾯
如果⽤户已经登录, 可是⼿动敲⼊⾮权限内的地址, 则需要跳转404界⾯

2.3.按钮的控制

在某个菜单的界⾯中, 还得根据权限数据, 展示出可进⾏操作的按钮, ⽐如删除,修改,增加

2.4.请求和响应的控制

如果⽤户通过⾮常规操作, ⽐如通过浏览器调试⼯具将某些禁⽤的按钮变成启⽤状态, 此时发的请求, 也
应该被前端所拦截

3. Vue的权限控制实现

3.1.菜单的控制

• 查看登录之后获取到的数据

{
   
    "data": {
   
        "id": 500,
            "rid": 0,
                "username": "admin",
                    "mobile": "13999999999",
                        "email": "123999@qq.com",
                            "token": "BeareeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1M
        TI1NDQyOTksImV4cCI6MTUxMjYzMDY5OX0.eGrsrvwHmtPsO9r_pxHIQ5i5L1kX9RX444uwnRGaIM"
    },
    "rights": [{
   
        "id": 125,
        "authName": "⽤户管理",
        "icon": "icon-user",
        "children": [{
   
            "id": 110,
            "authName": "⽤户列表",
            "path": "users",
            "rights": ["view", "edit", "add", "delete"]
        }]
    }, {
   
        "id": 103,
        "authName": "⻆⾊管理",
        "icon": "icon-tijikongjian",
        "children": [{
   
            "id": 111,
            "authName": "⻆⾊列表",
            "path": "roles",
            "rights": ["view", "edit", "add", "delete"]
        }]
    }, {
   
        "id": 101,
        "authName": "商品管理",
        "icon": "icon-shangpin",
        "children": [{
   
            "id": 104,
            "authName": "商品列表",
            "path": "goods",
            "rights": ["view", "edit", "add", "delete"]
        }, {
   
            "id": 121,
            "authName": "商品分类",
            "path": "categories",
            "rights": ["view", "edit", "add", "delete"]
        }]
    }],
        "meta": {
   
        "msg": "登录成功",
            "status": 200
    }
}

在这部分数据中, 除了该⽤户的基本信息之外, 还有两个字段很关键

1、token,⽤于前端⽤户的状态保持
2、rights:该⽤户具备的权限数据,⼀级权限就对应⼀级菜单,⼆级权限就对应⼆级菜单

• 根据rights中的数据, 动态渲染左侧菜单栏, 数据在Login.vue得到, 但是在Home.vue才使⽤, 所以可
  以把数据⽤vuex进⾏维护

vuex中的代码

export default new Vuex.Store({
   
    state: {
   
        rightList: []
    },
    mutations: {
   
        setRightList(state, data) {
   
            state.rightList = data
        }
    },
    actions: {
   
    },
    getters: {
   
    }
})