0 环境
1 文档
2 主要用到的文件
- src/routers所有文件
- src/views/login/LoginForm.vue
- src/assets/mock/geeker/login.json
3 大概流程
当我们输入登录的url 的时候，先是路由拦截(router.beforeEach )，判断该url 是login 且没有token ，直接放行进入。在登录页的界面输入用户名和密码，点击登录，先前端校验用户名和密码通过后，axios 请求后端，后端根据该用户返回对应的动态路由，前端拿到后，在进行加工，添加到layout路由下，以及一切其它准备完毕后。然后路由跳转到**/home/index**(这里在跳转前还会做一次路由的拦截)。
4 访问/login前的路由拦截
先找到src/routers/index.ts 中的router.beforeEach ，useUserStore()存放token 和用户信息的数据，useAuthStore()用来存在权限相关的数据的。开启进度条和设置动态标题，到了第三条判断是访问登陆页，有 Token 就在当前页面(比如你输入用户名和密码并成功登陆到了别人网站的首页了，然后将url改成/login 了，结果是会自动跳转到首页)，没有 Token 重置路由到登陆页，由于我们是首次登录，authStore.flatMenuListGet是空的，无重置内容，直接放行。
5 表单校验和登录
先找到src/views/login/LoginForm.vue ，element plus 基本的表单校验和快捷登录的功能(绑定回车键)，这里我们主要看login 方法，表单中不存在或者校验表单不通过，直接返回。若是表单存在且校验表单通过，loading 为true ，目的是让人不能在重复点击登录按钮，axios api请求，这里是请求自定义的mock，具体可以看下login.json 的返回内容。最终请求拿到返回值中data 的数据(其实就是拿token，access_token存的数据 )。将该token值设置到userStore里的state下的token中 。重点是添加动态路由 ，清空 tabs、keepAlive 数据，就是值设为\[\]，还有个重点是路由跳转到首页 。跳转成功后，根据当前的时间，给一个登录成功的欢迎提示。最终还要将loading 设为false。
6 流程图
7 总结
其实对于登录来说，访问
/login的路由拦截 ，然后就是前端的登录校验，获取token ，pinia 将它存好，清空一些数据，跳转到首页，并且给个成功提示。还有两个没具体提的重点是动态路由 和跳转到/home/index前的路由拦截，因为比较多，之后单独写一篇。