From 89dcdbf0f80e46775f1d2aff6bed759ab13c07d9 Mon Sep 17 00:00:00 2001 From: Heeexy Date: Sun, 19 Nov 2017 13:28:27 +0800 Subject: [PATCH] =?UTF-8?q?'=E5=89=8D=E7=AB=AF=E8=AF=B4=E6=98=8E'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- explain-frontend.md | 71 +++++++++++++++++++++++---------------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/explain-frontend.md b/explain-frontend.md index 0ab53c9..bc21e79 100644 --- a/explain-frontend.md +++ b/explain-frontend.md @@ -1,41 +1,27 @@ -# SpringBoot-shiro-vue -提供一套基于SpringBoot-shiro-vue的权限管理思路. +# 前端权限代码说明 -前后端都加以控制,做到按钮/接口级别的权限 +## 路由 -# 设计思路 +​ 路由分为两部分,一部分是固定的几个 ,比如/login,/404,另一部分是根据权限动态生成的. -### 核心 +​ `router/index.js` 里,动态路由都在 **asyncRouterMap**内,里面元素的关键属性为**menu** , 生成动态路由时,会根据用户权限json内的menuList里是否含有这个menu,来决定是否为此用户添加这个路由. - 每个登录用户拥有各自的N条权限,比如 文章:查看/编辑/发布/删除 +## 生成动态路由过程 -### 后端 -基于 [RABC新解](http://globeeip.iteye.com/blog/1236167) . -通常我们的权限设计都是 用户--角色--权限 ,其中**角色**是我们写代码的人没法控制的,它可以有多条权限,每个用户又可以设计为拥有多个角色.因此如果从角色着手进行权限验证,系统都必须根据用户的配置动起来,非常复杂. +1. `permission.js` vue-router的全局拦截器, 如果已登录状态而没有拿到用户的权限属性的话,说明还没查询用户权限信息,初始化动态路由 -所以我们后台设计的关键点就在于: **后台接口只验证权限,不看角色.** + ```javascript + if (!store.getters.role) { + store.dispatch('GetInfo').then(() => { + next({...to}) + }) + } + ``` -角色的作用其实只是用来管理分配权限的,真正的验证只验证**权限** ,而不去管你是否是那种角色.体现在代码上就是接口上注解为 +2. `user.js` ,查询到用户权限信息,并且存入vuex -```java -@RequiresPermissions("article:add") -``` - -而不是 - -```java -@RequiresRoles(value = {"admin","manager","writer"}, logical = Logical.OR) -``` - -### 前端 - -采用了[vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template) , [ElementUI](https://github.com/ElemeFE/element) , 权限设计思路也是参考了vueAdmin的动态路由的设计. - -后端负责了接口的安全性,而前端之所以要做权限处理,最主要的目的就是**隐藏掉不具有权限的菜单(路由)和按钮**. - -登录系统后,后端返回此用户的权限信息,比如 ```json "userPermission":{ "menuList":[ @@ -54,12 +40,29 @@ "userId":10003 } ``` -根据**menuList**判断给此用户生成哪些路由, 根据**permissionList**判断给用户显示哪些按钮,能请求哪些接口. -### 数据库 -最主要的是要有一张本系统内的全部权限明细表,比如下面这样 -![权限表](http://ots7yt7am.bkt.clouddn.com/blog/permissionDatabase.png) -![权限数据](http://ots7yt7am.bkt.clouddn.com/blog/permissionData.png) +​ 为什么不在登录的时候一并返回呢? 因为页面F5刷新的时候,vuex信息会丢失,所以需要重新查询一遍这些权限信息. 当然,把权限信息存入cookie也可以解决. -如果某用户拥有表格中前五条权限,就可以查出他就拥有article和user两个菜单,至于页面内是否显示(新增)(修改)按钮,就根据他的permissionList来判断. +​ 拿到userPermission后,调用生成动态路由的方法 + +```javascript +store.dispatch('GenerateRoutes', userPermission).then(() => { + router.addRoutes(store.getters.addRouters) +}) +``` + +3. `store/modules/permission.js` 现在,我们已经拿到了用户的权限信息,再从`@/router/index` 内拿到**asyncRouterMap**,逐一比较便可知道为用户生成哪些路由了 + +## 页面元素 + +​ 只需在按钮上添加 ` v-if="hasPerm('article:add')"` 就可以根据用户的权限来控制本页面元素(比如按钮)是否显示了. + +​ hasPerm方法也非常简单 + +```javascript +export function hasPermission(permission) { + let myPermissions = store.getters.permissions; + return myPermissions.indexOf(permission) > -1; +} +```