关于黑马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. 监听内容改变,保存在隐藏文本域(便于后期收集)
相关推荐
nuise_12 分钟前
李宏毅机器学习笔记06 | 鱼和熊掌可以兼得的机器学习 - 内容接宝可梦
人工智能·笔记·机器学习
Mintopia15 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52016 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖16 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia17 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
Carlos_sam19 分钟前
OpenLayers:封装Overlay的方法
前端·javascript
Json_21 分钟前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·javascript·vue.js
海底火旺22 分钟前
JavaScript中的“先有鸡还是先有蛋”——变量提升的奥秘
前端·javascript
the_flash23 分钟前
JS拖动的原理
前端·javascript
你的人类朋友24 分钟前
解释一下Node.js的『阻塞』现象,并回答:为什么会阻塞?什么情况下会阻塞?
javascript·后端·node.js