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

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

找到登录对应的方法

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

找到vuex中的user.js文件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在线教育项目用户登录和注册
在线教育项目04_讲师管理前端开发
在线教育项目04_讲师管理前端开发一.登录功能(临时) 跨域问题框架使用的过程二.前端讲师开发 1.讲师列表 2.讲师列表添加分页 3.讲师列表条件查询实现 4.讲师列表删除功能 5.讲师列表删 ...
在线教育项目02_前端知识（es6、vue）
在线教育项目02_讲师管理模块一.统一异常处理的另外两种情况 1.1 特殊异常(特定异常处理) 1.2 自定义异常处理二.统一日志处理 1.Logback日志工具三.ECMAScript 6.0 ...
在线教育项目_整体介绍
在线教育项目_整体介绍一.项目的背景二.商业模式 2.1 B2C(该项目的模式) 2.2 B2B2C(商家到商家到用户) 3.功能模块 3.1 系统后台 3.2 系统前台 4.项目使用到的技术 4 ...
(在线教育)项目总结
一.在线教育项目功能点(B2C) 1.后台管理系统 1.登录功能(SpringSecurity框架) 2.权限管理功能 (1)菜单管理列表.添加.修改.删除 (2)角色管理 * 列表.添加.修改.删 ...
尚硅谷在线教育十一：登录注册业务
文章目录 1. 用户登录业务介绍 1.1 单一服务器模式登录 1.2 单点登录 1.3 单点登录的常用三种方式 1.3.1. session广播机制实现 1.3.2 使用cookie+redis实现 ...
SpringBoot在线教育项目（十二）
在线教育(十二) 一.登录业务介绍一.用户登录业务介绍二.整合JWT 一.使用JWT进行跨域身份验证二.JWT令牌三.整合JWT令牌三.整合阿里云短信服务一.新建短信微服务二.阿里云短信 ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
黑马在线教育项目---5、使用填充器创建数据库数据
黑马在线教育项目---5.使用填充器创建数据库数据一.总结一句话总结: ①创建填充器文件:#php artisan make:seeder ManagerTableSeeder ③执行填充器文件: ...
对某在线教育平台用户使用RFM模型按价值分类
对某在线教育平台用户使用RFM模型按价值分类说在前面项目背景 RFM分析 RFM分析过程明确目的分析原因对R,F,M值进行定义统计R,F,M值给R,F,M值"打分" ...

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

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

最新文章

热门文章