关于黑马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. 监听内容改变,保存在隐藏文本域(便于后期收集)
相关推荐
一鹿有你们~3 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域
Sailing8 分钟前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
一枚前端小能手25 分钟前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖28 分钟前
极简三分钟ES6 - Promise
前端·javascript
小高00730 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
用户669820611298230 分钟前
vue3 hooks、utils、data这几个文件夹分别是放什么的?
javascript·vue.js
子兮曰31 分钟前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器
....49244 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
Ares-Wang1 小时前
Vue2 VS Vue3
javascript
今禾1 小时前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试