AJAX(1) - 技术栈

一.token的使用

概念:访问权限的令牌,本质是一串字符串

作用:判断是否有登录状态,控制访问权限

步骤:

1.在auth.js中判断五token令牌字符串,则强制跳转到登录页

javascript 复制代码

const token=localStorage.getItem('token')
//没有token,则强制跳转
if(!token){
location.href='../login/index.html'//或者是路由
}

2.登录成功后,保存token令牌字符串到本地,并跳转内容列表页面

二.个人信息设置和axios请求拦截器

语法:axios可以在headers选项传递请求头参数

javascript 复制代码

axios({
url:'目标地址'
headers:{
Authorization: `Bearer  ${localStorage.getItem('token')}`
}
})

解决:在请求拦截器统一设置公共headers选项

1.axios请求拦截器:发起请求之前,触发配置函数,对请求参数进行额外配置

javascript 复制代码

axios.interceptors.request.use(function(config){
//在发送请求之前做些什么
//统一携带token字符串
const token=localStorage.getItem('token')
token && config.headers.Authorization=`Bearer${token}`

return config;
},function(error){
//对请求错误做些什么
return Promise.reject(error)
})

2.axios响应拦截器:响应回到then/catch之前,触发的拦截函数,对响应结果统一处理

javascript 复制代码

axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  const result=response.data
  return result;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么，例如：判断响应状态为 401 代表身份验证失败
  if (error?.response?.status === 401) {
    alert('登录状态过期，请重新登录')
    localStorage.clear()
    window.location.href = '../login/index.html'
  }
  return Promise.reject(error);
});

三.发布文章-富文本编辑器

富文本:带样式,多格式的文本,在前端一般使用标签配合内样式实现

使用:wangEditor插件

步骤:

引入CSS定义样式
定义HTML结构
引入js创建编辑器
监听内容改变,保存在隐藏文本域