前端Vue：权限管理，给角色分配权限

👉前端-Vue权限控制，菜单权限，按钮权限_一人创客的博客-CSDN博客

目录

介绍：

前端权限的概念：

前端权限的意义：

Vue权限管理的代码实现：

菜单

刷新界⾯菜单消失

标识⽤户名, ⽅便查看当前⽤户

退出登陆： 

界面：

1.判断当前是否登陆

2.控制是否可以访问角色界面 （不太理解）

按钮：

请求和响应：

请求控制 

响应控制

总结（重要）：

菜单：

界面：

 按钮控制

请求和响应控制

---

介绍：

前端权限的概念：

        前端权限的控制本质上来说, 就是控制前端的 视图层的展示和前端所发送的请求。

        前端权限的实现必须要后端提供数据⽀持, 否则⽆法实现。返回的权限数据的结构,前后端需要沟通协商, 怎样的数据使⽤起来才最⽅便.

前端权限的意义：

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

        降低⾮法操作的可能性
        不怕贼偷就怕贼惦记, 在⻚⾯中展示出⼀个 就算点击了也最终会失败 的按钮, 势必会增加有⼼者
        ⾮法操作的可能性
        尽可能排除不必要请求,减轻服务器压⼒
        没必要的请求, 操作失败的请求, 不具备权限的请求, 应该压根就不需要发送, 请求少了, ⾃然也会减轻服务器的压⼒
        提⾼⽤户体验
        根据⽤户具备的权限为该⽤户展现⾃⼰权限范围内的内容，避免在界⾯上给⽤户带来困扰, 让⽤户专注于分内之事

Vue权限管理的代码实现：

菜单

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

//查看登陆之后获取的数据
{

"data": {

"id": 500,

"rid": 0, "username": "admin",

"mobile": "13999999999",

"email": ["123999@qq.com"](mailto:123999@qq.com), "token": "Bearer

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1M TI1NDQyOTksImV4cCI6MTUxMjYzMDY5OX0.eGrsrvwHm- tPsO9r_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
}
}

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

        token,⽤于前端⽤户的状态保持

        rights:该⽤户具备的权限数据,⼀级权限就对应⼀级菜单,⼆级权限就对应⼆级菜单。根据rights中的数据, 动态渲染左侧菜单栏, 数据在Login.vue得到, 但是在Home.vue才使⽤, 所以可以把数据⽤vuex进⾏维护：

//vuex的代码：
export default new Vuex.Store({ 
    state: {
        rightList:[]
    },
    mutations: { 
        setRightList(state, data) {
            state.rightList = data
        }
    },
    actions: