测试平台开发：flask+vue，权限的设计问题

flask+vue，权限的设计问题

我的想法，

通过后端管理权限，前端的菜单，按钮根据后端返回的权限进行展示，

后端

后端表：用户，角色，权限，用户角色关联表，角色权限关联表，
关键是权限表怎么设计，
权限有一级菜单，二级菜单，权限有页面和按钮，接口地址，

接口，
用户curd，角色curd，权限curd，
接口鉴权的问题使用装饰器，
通过token来判断是哪一个用户，然后根据用户查角色，根据角色查权限，看是否有权限，有权限就返回，没有权限报没有权限
token过期直接到登录页面，

试试flask的before和after，

前端，

用户管理，角色管理，权限管理，
关键是前端vue怎么根据后端返回进行判断展示，

• 在后台通过一个 tree 控件或者其它展现形式给每一个页面动态配置权限，之后将这份路由表存储到后端。

• 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。

• 权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，从而动态生成可访问页面，通过 router.addRoutes 动态挂载这些路由。多了一步将后端返回路由表和本地的组件映射到一起。

上述所有的数据和操作都是通过vuex全局管理控制的。(补充说明：刷新页面后 vuex的内容也会丢失，所以需要重复上述的那些操作)接下来
所以每次刷新页面都会请求info接口，获取最新的权限，如果你不刷新页面是不需要请求这个info接口的，

登陆

登录成功后，服务端会返回一个 token（该token的是一个能唯一标示用户身份的一个key），之后我们将token存储在本地cookie之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。

获取用户信息

用户登录成功之后，我们会在全局钩子router.beforeEach中拦截路由，判断是否已获得token，在获得token之后我们就要去获取用户的基本信息了
router.beforeEach
每一个页面请求都会进到这里，

权限

权限篇
先说一说我权限控制的主体思路，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。

router.js

首先我们实现router.js路由表，这里就拿前端控制路由来举例(后端存储的也差不多，稍微改造一下就好了)
这里我们根据 vue-router官方推荐 的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: ['admin','super_editor'] }表示该页面只有admin和超级编辑才能有资格进入。

这里我需要改造，基本就不适用这个roter.js了，我要从后端拿到数据，然后通过router.addRoutes动态挂载路由

//异步挂载的路由
//动态需要根据权限加载的路由表 
export const asyncRouterMap = [
  {
    path: '/permission',
    component: Layout,
    name: '权限测试',
    meta: { role: ['admin','super_editor'] }, //页面需要的权限
    children: [
    { 
      path: 'index',
      component: Permission,
      name: '权限测试页',
      meta: { role: ['admin','super_editor'] }  //页面需要的权限
    }]
  },
  { path: '*', redirect: '/404', hidden: true }
];

现在路由层面权限的控制代码都在 @/permission.js 中，如果想修改逻辑，直接在适当的判断逻辑中 next() 释放钩子即可。

按钮级别的权限判断

指令权限
封装了一个指令权限，能简单快速的实现按钮级别的权限判断。 v-permission
指令权限
封装了一个指令权限，能简单快速的实现按钮级别的权限判断。 v-permission

使用

<template>
  <!-- Admin can see this -->
  <el-tag v-permission="['admin']">admin</el-tag>

  <!-- Editor can see this -->
  <el-tag v-permission="['editor']">editor</el-tag>

  <!-- Editor can see this -->
  <el-tag v-permission="['admin','editor']">Both admin or editor can see this</el-tag>
</template>

<script>
// 当然你也可以为了方便使用，将它注册到全局
import permission from '@/directive/permission/index.js' // 权限判断指令
export default{
  directives: { permission }
}
</script>

要先导入这个指令

局限

In some cases it is not suitable to use v-permission, such as element Tab component which can only be achieved by manually setting the v-if.

可以使用全局权限判断函数，用法和指令 v-permission 类似。

<template>
  <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数

export default{
   methods: {
    checkPermission
   }
}
</script>

做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。
原理就是这样，

===