携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
书接上文
解析permission.ts中的代码，这是一个守卫路由，注释很清楚，38行判断是否有token，这里获取token可以在Vuex store中看到精确定位。
index.ts中找到46行store ->
40行user在store/user文件夹 ->
states.js文件20行 getToken() ->
@/utils/cookies.ts文件 20行，获取浏览器中存储的token。
38行判断失败后70行 白名单里的页面whiteList可以无登录访问，如果不是白名单里的页面就跳转login页，讲要访问的页面路由path作为参数传给login页，登录成功后跳转该路由。
39行之后就很简单了。判断如果要跳转的是login页面就跳到首页。如果不是登录页，并且vuex中没有保存动态路由信息。
进入48行可以去store中user文件查找，是请求@/apis/user.ts中的用户信息放到state中。
49行异步获取到角色信息，51行通过用户角色判断包含的路由在store/perimission/actions.ts文件中详细看一下路由判断信息的。37行 筛选从出角色对应的路由权限添加到路由中去 57行是权限判断中调用的方法。25行是筛选路由的具体方法。
然后再看第一张图53行将上边添加到vuex中的路由信息动态添加到现有路由中去。catch中是当上述添加动态路由失败时重置token和roles，清除登录信息。
路由这里我们已经清楚了，我这里没有看到退出登录的按钮，好像是没有呀，那我们自己写一个吧。刚好检验一下自己对于本项目的熟悉程度。
