希望可以不断接受开发上的挑战 ,然后不断的进行技术精进。
上面的图片大概是项目的一个portal 页 ,就是登陆后先来到portal 页面,根据当前用户的角色权限,显示当前赋予权限的系统,可能有一个系统,可能有两个系统,也可能没有任何权限。另外项目中的路由权限也是依据后台给前端的数据,因此对应的路由的注册,也是如果当前用户有这个系统的权限,根据系统管理的配置也可以配置到某个菜单的权限,服务端将当前用户的菜单权限给到前端,前端再进行动态的注册,这个的核心就是addRoute,关于去重等,不做详细的说明。如果仅仅是前面的需求,就是登陆后,直接根据用户获取到对应的菜单权限,进行路由的注册,直接进入系统就可以了,但是现在将系统管理提至portal页面了,希望是在进入系统管理后,点击返回到portal页面的入口,可以直接到portal 页,而此时用户的一些权限有可能已经发生了改变,比如原来有没有系统1的权限,现在有了,或者已经和原来的权限完全不同了,因此需要重新根据权限进行路由的注册,如果不注册可能菜单都有,但是页面可想而知。因为原项目的路由注册是在路由拦截守卫初进行判断的,我了不大动原来的代码逻辑,也选择了在路由守卫处进行判断重新注册,因此获从服务器重新获取权限的操作,就需要放在进入portal 页之前。
核心清空路由的代码改动如下:
原来Router 直接定义一个常量对象,而现在要改为一个函数,以便清空等不必要的内容。
const createRouter =()=>({
routes:[{
path:'/',
redirect:'/login'
},{
path:'login',
name:'login',
component:Login
},{
path:'/navigation',
name:'navitagtion',
component:Navigation
}]
})
const router = createRouter()
...... 省略无数的代码
// 清空原来已经注册的路由,那就要设置路由的matcher
router.matcher = createRouter().matcher
// 接下来再走普通注册路由的方式就OK了
想说的就那么多 。此处不知道怎么输入一个表情包。。。