在线教育项目【用户登录逻辑分析】前端vue

快来打我* 2023-10-02 21:24 52阅读 0赞

![66234a0f55be47a49a260a380cd2aff6.png][]

首先找到login文件夹下面的index.vue页面

![12ad587bfdff426ebac044a21a5b3c71.png][]

找到登录对应的方法

![ff2688d7c6d74bc1a2ca3dc4183045ce.png][]

登录方法中：表单校验通过之后将表单信息发送到了vuex中的user.js文件中的login方法进行接收

找到vuex中的user.js文件

![8187beba72c84d37a39fef7743ecece8.png][]

看一下在这个login方法中具体做了哪些事情

![5a2ce6392cbd49d38324458ed2bc32d8.png][]

1，首先把登录信息传进来了，执行了api文件夹中的user.js文件中的login方法发送与后端的连接，将响应出来的返回了出来

![64cd369abe704cbba2938a077554211c.png][]

2，后端处理完之后返回一个token值，然后又执行了commit（'SET-TOKEN'）并将后端返回的token存入！那么这个commit是什么方法？看下图，它将返回回来的token值存入了vuex中

![8d2a5c3b4a2544a08ca539fc91d3a567.png][]

3，执行commit之后，它又执行了setToken(data.token)，这个setToken是哪个方法？在utils中的auth文件中

![3e5bcba2f4cf43c885eff15a840e8fcd.png][]

4，到auth文件中查看方法，发现它做了一件是将后端返回来的token值存放在浏览器中的cookie中

![3696bf3fd2e9425181cb21f2c01a5298.png][]

5，现在已经明确后端返回的token已经存放到vuex和浏览器端的cookie中了，研究一下**token的用法，token返回起到一个校验的作用**

**到main.js文件中（程序的入口）**

![0bd717aacab945db96db75b56e48e2b8.png][]

进入permission.js文件（权限控制页面很重要）

![e1ff6115f9924573a991ecb581c93f72.png][]

第一个知识点：要明白这个权限认证文件是通过：路由进行认证的

![773a87237cc7428d8abab746b8a6cbbe.png][]

第二个知识点：进入每个页面的动态进度条

![3f43fdb5477445be9f205d80d93e0144.png][]

![a5cfdbbf1833444ea33d7231f70a536d.png][]

第三个页面切换前，会从浏览器端获得token判断是否存在

如果不存在跳转到登录页面

![752e2444fcc5434fbc4eb6eb469dfc5f.png][]

如果token存在，会进行判断登录的路径，如果是登录直接放行首页

如果不是登录路径会去vuex中把查找角色或者说权限，如果有角色放行

如果没有角色，发送ajax到后端

![03f0ac1eb0b849b7a1f07e99564116b5.png][]

发送到后端获取到数据，返回数据存放角色里面，判断角色是否包含admin，来进行赋予权限，有权限就添加动态路由

![03f0ac1eb0b849b7a1f07e99564116b5.png][]

[66234a0f55be47a49a260a380cd2aff6.png]: https://img-blog.csdnimg.cn/66234a0f55be47a49a260a380cd2aff6.png
[12ad587bfdff426ebac044a21a5b3c71.png]: https://img-blog.csdnimg.cn/12ad587bfdff426ebac044a21a5b3c71.png
[ff2688d7c6d74bc1a2ca3dc4183045ce.png]: https://img-blog.csdnimg.cn/ff2688d7c6d74bc1a2ca3dc4183045ce.png
[8187beba72c84d37a39fef7743ecece8.png]: https://img-blog.csdnimg.cn/8187beba72c84d37a39fef7743ecece8.png
[5a2ce6392cbd49d38324458ed2bc32d8.png]: https://img-blog.csdnimg.cn/5a2ce6392cbd49d38324458ed2bc32d8.png
[64cd369abe704cbba2938a077554211c.png]: https://img-blog.csdnimg.cn/64cd369abe704cbba2938a077554211c.png
[8d2a5c3b4a2544a08ca539fc91d3a567.png]: https://img-blog.csdnimg.cn/8d2a5c3b4a2544a08ca539fc91d3a567.png
[3e5bcba2f4cf43c885eff15a840e8fcd.png]: https://img-blog.csdnimg.cn/3e5bcba2f4cf43c885eff15a840e8fcd.png
[3696bf3fd2e9425181cb21f2c01a5298.png]: https://img-blog.csdnimg.cn/3696bf3fd2e9425181cb21f2c01a5298.png
[0bd717aacab945db96db75b56e48e2b8.png]: https://img-blog.csdnimg.cn/0bd717aacab945db96db75b56e48e2b8.png
[e1ff6115f9924573a991ecb581c93f72.png]: https://img-blog.csdnimg.cn/e1ff6115f9924573a991ecb581c93f72.png
[773a87237cc7428d8abab746b8a6cbbe.png]: https://img-blog.csdnimg.cn/773a87237cc7428d8abab746b8a6cbbe.png
[3f43fdb5477445be9f205d80d93e0144.png]: https://img-blog.csdnimg.cn/3f43fdb5477445be9f205d80d93e0144.png
[a5cfdbbf1833444ea33d7231f70a536d.png]: https://img-blog.csdnimg.cn/a5cfdbbf1833444ea33d7231f70a536d.png
[752e2444fcc5434fbc4eb6eb469dfc5f.png]: https://img-blog.csdnimg.cn/752e2444fcc5434fbc4eb6eb469dfc5f.png
[03f0ac1eb0b849b7a1f07e99564116b5.png]: https://img-blog.csdnimg.cn/03f0ac1eb0b849b7a1f07e99564116b5.png