[前端笔记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)

你可能感兴趣的:(前端,前端,javascript,node.js)