前端权限代码说明

explain-frontend.md

@@ -0,0 +1,65 @@
+# SpringBoot-shiro-vue
+提供一套基于SpringBoot-shiro-vue的权限管理思路.
+
+前后端都加以控制,做到按钮/接口级别的权限
+
+# 设计思路
+
+### 核心
+
+ 	每个登录用户拥有各自的N条权限,比如 文章:查看/编辑/发布/删除
+
+### 后端
+
+基于 [RABC新解](http://globeeip.iteye.com/blog/1236167) . 
+
+通常我们的权限设计都是 用户--角色--权限 ,其中**角色**是我们写代码的人没法控制的,它可以有多条权限,每个用户又可以设计为拥有多个角色.因此如果从角色着手进行权限验证,系统都必须根据用户的配置动起来,非常复杂.
+
+所以我们后台设计的关键点就在于: **后台接口只验证权限,不看角色.**
+
+角色的作用其实只是用来管理分配权限的,真正的验证只验证**权限** ,而不去管你是否是那种角色.体现在代码上就是接口上注解为
+
+```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":[  
+            "role",
+            "user",
+            "article"
+         ],
+         "roleId":1,
+         "nickname":"超级用户",
+         "roleName":"管理员",
+         "permissionList":[  
+            "article:list",
+            "article:add",
+            "user:list",
+         ],
+         "userId":10003
+      }
+```
+根据**menuList**判断给此用户生成哪些路由, 根据**permissionList**判断给用户显示哪些按钮,能请求哪些接口.
+
+### 数据库
+最主要的是要有一张本系统内的全部权限明细表,比如下面这样
+![权限表](http://ots7yt7am.bkt.clouddn.com/blog/permissionDatabase.png)
+![权限数据](http://ots7yt7am.bkt.clouddn.com/blog/permissionData.png)
+
+如果某用户拥有表格中前五条权限,就可以查出他就拥有article和user两个菜单,至于页面内是否显示(新增)(修改)按钮,就根据他的permissionList来判断.
+

vue/src/views/article/article.vue

@@ -148,28 +148,3 @@
     }
   }
 </script>
-<style>
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #20a0ff;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
-</style>