关于黑马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. 监听内容改变,保存在隐藏文本域(便于后期收集)
相关推荐
米饭不加菜9 分钟前
typora的基本用法
笔记
Asort25 分钟前
JavaScript设计模式(十九)——观察者模式 (Observer)
前端·javascript·设计模式
前端付豪31 分钟前
为啥升Vue3 有啥优势?
前端·javascript·vue.js
举个栗子dhy32 分钟前
第四章、路由配置
前端·javascript·react.js
用户842981424181035 分钟前
Node.js:JavaScript的服务器端革命
javascript
小高00739 分钟前
instanceof 和 typeof 的区别:什么时候该用哪个?
前端·javascript·面试
im_AMBER39 分钟前
React 03
前端·笔记·学习·react.js·前端框架·react
豆苗学前端1 小时前
JavaScript原型对象、构造函数、继承与类详解
前端·javascript·后端
参宿71 小时前
图解Vue3 响应式,手动实现核心原理
前端·javascript·vue.js
2301_801252222 小时前
前端框架Vue(Vue 的挂载点与 data 数据对象)
java·前端·javascript·vue.js·前端框架