前端用户登录验证¶
01.验证码登录¶
目标¶
为了前端完成验证码登录，后端设置验证码默认为 246810
讲解¶
原因：因为短信接口不是免费的，防止攻击者恶意盗刷
步骤：
1.在 utils/request.js 配置 axios 请求基地址
作用：提取公共前缀地址，配置后 axios 请求时都会 baseURL + url
2.收集手机号和验证码数据
3.基于 axios 调用验证码登录接口
4.使用 Bootstrap 的 Alert 警告框反馈结果给用户
小结¶
暂无
02.验证码登录流程¶
目标¶
了解验证码登录的流程
讲解¶
手机号+验证码，登录流程：
- 客户端-登录界面（通常手机验证码登录）
1.填写手机号 2.发送验证码 3.填写验证码 4.勾选新用户自动注册
- 服务端-用户验证
1.验证账号验证码是否正确 2.验证用户是否存在（不存在出初始化用户信息） 3.完成验证生成token 4.将token返回给客户端
小结¶
登录验证流程涉及到了两个接口，两个缓存。
1.获取验证码接口，给手机号发送验证码并设置验证码缓存，设置过期时间;
2.登录接口，提交手机号及验证码，读取缓存进行匹配验证，成功则生成token返回给客户端，客户端登录成功，登录后请求头携带token进行业务请求即可。
03.token 的介绍¶
目标¶
了解前后端分离项目中 token 的作用
讲解¶
概念：访问权限的令牌，本质上是一串字符串
创建：正确登录后，由后端签发并返回
作用：判断是否有登录状态等，控制访问权限
注意：前端只能判断 token 有无，而后端才能判断 token 的有效性
目标：只有登录状态，才可以访问内容页面
步骤：
1.在 utils/auth.js 中判断无 token 令牌字符串，则强制跳转到登录页（手动修改地址栏测试）
2.在登录成功后，保存 token 令牌字符串到本地，再跳转到首页（手动修改地址栏测试）
const token = localStorage.getItem('token')
// 没有 token 令牌字符串，则强制跳转登录页
if (!token) {
location.href = '../login/index.html'
}
小结¶
- token 的作用？
答案
- 判断用户是否有登录状态等
- token 的注意：
前端只能判断 token 的有无
后端通过解密可以提取 token 字符串的原始信息，判断有效性
04.个人信息设置和 axios 请求拦截器¶
目标¶
了解 axios 请求拦截器的概念和使用场景
讲解¶
需求：设置用户昵称
语法：axios 可以在 headers 选项传递请求头参数
问题：很多接口，都需要携带 token 令牌字符串
解决：在请求拦截器统一设置公共 headers 选项
对应代码：
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
axios({
// 个人信息
url: '/v1_0/user/profile'
}).then(result => {
// result：服务器响应数据对象
}).catch(error => {
})
axios.interceptors.request.use(function (config) {
const token = location.getItem('token')
token && config.headers.Authorization = `Bearer ${token}`
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
小结¶
- 什么是 axios 请求拦截器？
答案
- 发起请求之前，调用的一个函数，对请求参数进行设置
- axios 请求拦截器，什么时候使用？
答案
- 有公共配置和设置时，统一设置在请求拦截器中
05. axios 响应拦截器和身份验证失败¶
目标¶
了解 axios 响应拦截器的概念和使用场景，以及身份验证失败的场景流程和判断使用
讲解¶
axios 响应拦截器：响应回到 then/catch 之前，触发的拦截函数，对响应结果统一处理
例如：身份验证失败，统一判断并做处理
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
return result;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么，例如：判断响应状态为 401 代表身份验证失败
if (error?.response?.status === 401) {
alert('登录状态过期，请重新登录')
window.location.href = '../login/index.html'
}
return Promise.reject(error);
});
小结¶
- 什么是 axios 响应拦截器？
答案
- 响应回到 then/catch 之前，触发的拦截函数，对响应结果统一处理
- axios 响应拦截器，什么时候触发成功/失败的回调函数？
答案
- 状态为 2xx 触发成功回调，其他则触发失败的回调函数
06.优化 axios 响应结果¶
目标¶
axios 直接接收服务器返回的响应结果
讲解¶
思路：其实就是在响应拦截器里，response.data 把后台返回的数据直接取出来统一返回给所有使用这个 axios 函数的逻辑页面位置的 then 的形参上
好处：可以让逻辑页面少点一层 data 就能拿到后端返回的真正数据对象
对应代码如下：
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么，例如：直接返回服务器的响应结果对象
const result = response.data
return result;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么，例如：判断响应状态为 401 代表身份验证失败
if (error?.response?.status === 401) {
alert('登录状态过期，请重新登录')
window.location.href = '../login/index.html'
}
return Promise.reject(error);
});
小结¶
暂无