[前端笔记029]token和axios

前言

• 本笔记参考视频，李立超:BV1Gg411z7fA p9 -p20

本地存储

• 之前的登录持久化，是使用cookie+session的方式完成的，但cookie是在服务器创建的，针对前后的分离的场景时，cookie有跨域的问题，再者就是fetch本身就不带cookie信息；所以rest风格服务器不使用cookie
• 可以将用户信息存储到浏览器本地存储，sessionStorage和localStorage；前者有效期较短，页面关闭就会丢失，注意是页面不是浏览器会话，所以使用较少；后者，不删不会消失
• sessionStorage和localStorage为全局变量，都只能存字符串，可以直接打印使用，
• 两者用法一样sessionStorage.setItem(“数据名字”,“值”)/getItem(“数据名字”)/removeItem(“数据名字”)/clear()

token

• 上述问题，1.安全，本地存储为明文；2.服务器不知道有没有登录
• rest风格服务器是无状态服务器，不在服务器中存储用户的信息，所以不能用session在服务器中存储；实际上将用户信息用token加密后发给客户端保存，客户端每次访问服务器时，直接将用户信息发回，服务器就可以根据用户信息识别用户身份
• 在服务器的创建和接收：

//先npm下载jsonwebtoken，再引入jwt
const jwt = require("jsonwebtoken")
//创建个对象
const obj = {}
//使用jwt对json数据进行加密
const token = jwt.sign(obj/string,"密码",{
	//配置项，常用的为expiresIn，指定有效时间，
	expiresIn:"1h"
})
//获取请求头
token = req.get("Authorization").split(" ")[1]
//接收后解密,加异常判断处理过期token
try{
	jwt.verify(token,"加密一样的密码")
} catch(e){}

• 客户端接收到token后存起来，在需要验证权限的场合把token发回服务器，一般通过请求头发送，设置fetch的可选配置中的Authorization为Bearer ${token}，Bearer为权限认证方案，但现在基本都是Bearer

axios

• axios是基于promise的网络请求库，作用于node.js和浏览器中，在服务器中使用原生的http模块，在浏览器中使用xhr；自动转换json数据
• 服务器用npm下载，浏览器使用script标签或打包工具引入
• 使用方法：

axios({
	method:"get/post",
	url:"请求路径",
	data:{请求体对象}  //这里自动转换，不用手动转为json
}).then(res =>{
	//res经过了axios的封装，.data就可以访问返回的数据
	console.log(res.data)
}).catch(err => {
	//只有在响应状态为2xx时才会调用then，其他都会到catch，这一点与fetch不同
})

• axios的配置对象：
  1. baseURL，指定服务器根目录
  2. url，请求的地址
  3. method，请求方法，默认get
  4. headers:{}，指定请求头
  5. data:{}，请求体，自动转换为json
  6. transformRequest:[fun(data,headers),fun]，用来处理请求数据，函数数组作为参数，请求发送时，函数会依次执行；对data和headers进行修改，使用return传递数据；最后一个函数必须返回一个字符串，才能使数据有效，用JSON.stringify转换
  7. transformResponse，处理响应信息，用法同上
  8. params:{}，设置查询字符串
  9. timeout:1000，请求超时时间，默认0一直等
  10. signal，用来终止请求
• 响应结构。data+status+statusText+headers+config（请求时的配置）+request（原生的xhr对象）
• 默认配置，使用 axios.defaults.配置属性，来设置全局的默认配置，方便操作
• axios实例，使用const instance=axios.create()创建实例，实例和axios的功能一样，是axios的一个副本，好处是可以单独修改axios实例的默认配置
• axios拦截器，可以在请求发送前和响应读取前拦截并处理数据

//只对当前实例生效，axios或者实例
const myInterceptors = axios.interceptors.request.use(fun(config){
	//config表示axios中的配置对象
	// 一般用来设置默认配置
	return config
},fun(err){
	return Promise.reject(err)
})

// 拦截器的取消
axios.interceptors.request.eject(myInterceptors)