前后端分离后的权限控制设计​方案

简述

近几年随着 react、angular、vue 等前端框架兴起，前后端分离的架构迅速流行。但同时权限控制也带来了问题。

网上很多前、后端分离权限仅仅都仅仅在描述前端权限控制、且是较简单、固定的角色场景，满足不了我们用户、角色都是动态的场景。且仅仅前端进行权限控制并不是真正意义的权限控制，它只是减少页面结构暴露、增强用户体验的功效。

场景

系统为后台管理系统，包含了用户创建、用户登录、用户管理自己的资源。用户经常会新增、删除，也可以根据工作情况随时调整页面、功能权限，所以采用用户-角色-页面权限方案实现。

为什么不行：

1. 根据前端路由表显示左侧菜单，但 vue-router 的路由表主要为了组织代码，经常我们所需要的菜单并非一致。比如某个前端路由 a 子路由有 b、c，但菜单中我们想要直接一级菜单就显示 b、c 或者将 b、c 各放到其他菜单下。所以这种非常不灵活。

2. 一个路由是菜单还是页面?是否需要显示到菜单中?是否验证权限?哪个角色或者用户拥有权限?这些都需要写到前端路由里面，一旦有任何权限变动就要大量调整代码。

3. 如果权限写死在前端，那么角色或者用户必须已知且固定不变。比如页面 1 的 meta 增加属性标识可访问的角色为 a 和 b。

页面

一个页面即一个前端页面，比如首页、用户管理页、资源管理页等。

基本思路为：前端路由保持不变，数据库存储菜单结构、页面权限控制(可以直接做成一个页面来方便管理)等，前端根据数据库中的菜单结构和权限信息来渲染一个菜单出来并只显示其有权限的菜单，并在路由守卫中进行权限控制防止手动输入 path 越权打开页面。

1. 前端路由(vue-router)中需要正常创建页面及路由。

2. 数据库存储菜单结构和页面权限信息。

a. 菜单(目录、非内容