关于门户的前端权限控制

前沿：我所理解的门户Portal就是一个入口, 可快速整合应用入口，用来统一账号管理、统一认证登录，打破信息孤岛等，做统一的权限管理，也可以实现单点登录 SSO。早期的MVC时代，web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏，只不过呈现方式不同，大多以php和jsp等为主，随着前后端分离后，前端也成了权限控制的扛把子，主要是从以下这几个角度去实现，路由层面、视图层面以及接口层面

1.路由层面

一般SPA应用结合vue-router和vuex实现完成的一套路由体系，主要两种方式，一种是通过vue-router addRoutes 方法注入路由实现控制，另外一个是直接通过vue-router beforeEach钩子限制路由跳转

1.1 router.beforeEach()

beforeEach钩子函数就是在路由跳转前执行的，通过注册 router.beforeEach 钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存再于基本路由和当前用户的用户路由中，则取消跳转，转为跳转错误页或登录页面

• 在路由定义时添加meta的一个属性，来控制判断该页面是否需要登录权限

1.2 动态路由 （DynamicRoutes）

用来实现页面访问权限，动态路由通过router.addRoutes() ，来只挂载当前用户拥有权限的路由，如果用户直接访问未授权的路由，则会进入404页面。但是前提是需要用户登录后获取路由权限，一般动态挂载是在router.beforeEach处理的，下面我们看具体实现

• 定义好需要动态挂载的路由，区分是分为初始路由和根据role角色来动态挂载的“用户路由”，比如constantRoutes和 asyncRoutes
• router.beforeEach 添加 router.addRoutes 事件 文档链接