关于黑马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. 监听内容改变,保存在隐藏文本域(便于后期收集)
相关推荐
烛阴44 分钟前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
前端张三1 小时前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js
爱的叹息2 小时前
解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案
javascript·rust·sass
努力奋斗的小杨2 小时前
学习MySQL的第十二天
数据库·笔记·学习·mysql·navicat
夕水2 小时前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生2 小时前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
枫叶20003 小时前
OceanBase数据库-学习笔记1-概论
数据库·笔记·学习·oceanbase
一点.点3 小时前
李沐动手深度学习(pycharm中运行笔记)——04.数据预处理
pytorch·笔记·python·深度学习·pycharm·动手深度学习
一点.点3 小时前
李沐动手深度学习(pycharm中运行笔记)——07.自动求导
pytorch·笔记·python·深度学习·pycharm·动手深度学习
tcoding3 小时前
《MySQL 技术内幕-innoDB 存储引擎》笔记
数据库·笔记·mysql