被这个动态路由折磨了三天,记录下经验:
一、路由:
路由分两块,一是公共页面,如登录页、不需要登录、不需要权限就能访问的页面。另一部分是后台动态返回的权限列表。
因此,路由分为了默认路由和权限路由两部分:
默认路由:登录页。
权限路由:其他所有需要控制权限的路由。
二、登录:
1、登录获取登录状态、用户信息、后端返回的权限列表;
2、本地localstorage缓存数据,为用户刷新页面保存数据。
3、进行页面跳转(跳到home页)。
三、入口main.js配置:
1、在route.beforeEach中,判断用户是否登录,已登录next(),未登录跳到登录页。
2、有些页面可能只有管理员或特殊级别人员看到,可以辅助role进行判断。router的meta里可以携带要求的角色权限信息。
3、处理刷新的情况:如果页面刷新,因为store里的数据完全丢失,本地localstorage恢复数据。
四、配置路由:
很多人把配置路由放在了route.beforeEach中,在这里判断用户是否已经加载路由,我也用了这个方法,但折腾了好久都没成功。最后换了个思路。
1、store里用routesAdded字段表示路由是否已经动态加载。
2、默认routesAdded值为false,登录成功缓存数据时缓存的的值也是false。
3、由于不管是刷新页面还是vue router push,App都会created,所以动态配置路由的工作放到了App的created里了。
4、如果store里routesAdded为false,配置动态路由。
五、动态路由:
1、递归过滤处理后台返回的权限列表,跟本地所有的权限路由进行比对过滤,生成一份需要动态加载的动态路由。
2、设置动态路由的默认跳转,如果路由有children就自动跳转到chidren的第一个路由,以此类推。
3、通过router.addRoutes动态添加路由。
4、动态路由加载完成后,将routesAdded设置为true,这样如果不刷新页面的话,就不用再次配置动态路由了。