在github上找到一个很好的vue项目，用来学习
git 仓库：github.com/PanJiaChen/…
代码分支：commit 1d684b76328e3f6bcd3f75ea011087cce1c13a3c (HEAD, tag: v3.9.3)
切换分支后执行 npm install , npm run dev 即可运行
vuex官方文档
v3.vuex.vuejs.org/zh/guide/ac…
vue-router官方文档
需要提前看vue运行流程 juejin.cn/post/722283…
图一、main.js 引入了其他的组件
由于事先已经大致看过代码，所有从最关心的部分说起
1-路由
图二、路由相关的引用
src/router/index.js ， 定义了路由和对应的组件；
src/permission.js， 定义了每个路径在路由前后的一下动作，例如权限判断；
1.1- permission.js
permission.js中定义了路由的前置方法和后置方法，这里主要关注前置方法 router.beforeEach
图三、permission.js
其中的router变量，就是 src/router/index.js
图四、src/router/index.js
图五、src/router/index.js
根据图五，src/router/index.js，当访问 http://localhost:9527 时，就会跳转到dashboard， 此时就会触发 router.beforeEach
router.beforeEach执行步骤：
1-检查cookie中是否存在 Admin-Token
1-1如果不存在 Admin-Token
1-1-1如果要访问的路径在 whiteList中，则直接跳转
1-1-2如果访问的路径不在whiteList中，则跳转到 /login 路径，至此走到登录页
2- 如果cookie存在 Admin-Token
2-1 如果访问的路径是/login，则直接跳转到 /
2-2 如果访问的路径不是/login
2-2-1 检查vuex中是否存在用户信息
2-2-1-1 如果不存在用户信息，则在vuex.store中分发 GetUserInfo 事件（这里涉及到vuex actions知识点：在 vuex.store 的actions属性下定义函数A，在调用的地方使用 store .dispatch(A)，就会调用到函数A），接收到这个事件的函数会获取用户信息
2-2-1-2 获取成功后，用户信息中包含角色，vuex再分发 GenerateRoutes 事件，根据角色添加一些额外的路径，
2-2-2 如果vuex中存在用户信息
2-2-2-1 判断用户是否有权限，有权限则继续； 没有权限则路径跳转到 /401
