关于黑马Ajax项目的笔记
一、token的介绍
概念：
访问权限的令牌，本质上是一串字符串
创建：
正确登录后，由后端签发并返回
作用：
判断是否有登录状态等，控制访问权限
注意
前端只能判断token有无，后端才能判断token的有效性
二、个人信息设置和axios请求拦截器
需求：
设置用户昵称
语法：
axios可以在headers选项传递请求头参数
问题：
很多接口，都需要携带token令牌字符串
解决：
在请求拦截器统一设置公共headers选项
axos请求拦截器：
发起请求之前，触发的配置函数，对请求参数进行额外配置
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)
})
axos响应拦截器：
响应回到then/catch之前，触发的拦截函数，对响应结果统一处理
例如：身份验证失败统一判断处理
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么，例如：直接返回服务器的响应结果对象
const result = response.data
return result;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么，例如：统一对 401 身份验证失败情况做出处理
console.dir(error)
//可选链式操作符 用于访问对象的属性 或调用方法时，可以在链式表达式中处理可能为null或undefined的中间属性或方法，避免抛出错误
if (error?.response?.status === 401) {
alert(‘身份验证失败，请重新登录’)
localStorage.clear()
location.href = ‘…/login/index.html’
}
return Promise.reject(error);
});
三、发布文章-富文本编辑器
目标：
发布文章页，富文本编辑器的集成
使用：
wangEditor插件
步骤：
参考文档
- 引入CSS定义样式
- 定义HTML结构
- 引入J5创建编辑器
- 监听内容改变，保存在隐藏文本域（便于后期收集）