'前端说明'

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;
+}
+```