前沿:我所理解的门户Portal就是一个入口, 可快速整合应用入口,用来统一账号管理、统一认证登录,打破信息孤岛等,做统一的权限管理,也可以实现单点登录 SSO。早期的MVC时代,web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏,只不过呈现方式不同,大多以php和jsp等为主,随着前后端分离后,前端也成了权限控制的扛把子,主要是从以下这几个角度去实现,路由层面、视图层面以及接口层面
一般SPA应用结合vue-router和vuex实现完成的一套路由体系,主要两种方式,一种是通过vue-router addRoutes 方法注入路由实现控制,另外一个是直接通过vue-router beforeEach钩子限制路由跳转
beforeEach钩子函数就是在路由跳转前执行的,通过注册 router.beforeEach 钩子对路由的每次跳转进行管理,每次跳转都进行检查,如果目标路由不存再于基本路由和当前用户的用户路由中,则取消跳转,转为跳转错误页或登录页面
用来实现页面访问权限,动态路由通过
router.addRoutes()
,来只挂载当前用户拥有权限的路由,如果用户直接访问未授权的路由,则会进入404页面。但是前提是需要用户登录后获取路由权限,一般动态挂载是在router.beforeEach
处理的,下面我们看具体实现
constantRoutes
和 asyncRoutes
router.beforeEach
添加 router.addRoutes
事件 文档链接