关于黑马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插件

步骤:

参考文档

  1. 引入CSS定义样式
  2. 定义HTML结构
  3. 引入J5创建编辑器
  4. 监听内容改变,保存在隐藏文本域(便于后期收集)
相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping7 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风8 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端9 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧9 小时前
Promise 的使用
前端·javascript
前端康师傅10 小时前
JavaScript 作用域
前端·javascript
云枫晖10 小时前
JS核心知识-事件循环
前端·javascript
eason_fan11 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript