前言
本地存储
- 之前的登录持久化,是使用cookie+session的方式完成的,但cookie是在服务器创建的,针对前后的分离的场景时,cookie有跨域的问题,再者就是fetch本身就不带cookie信息;所以rest风格服务器不使用cookie
- 可以将用户信息存储到浏览器本地存储,sessionStorage和localStorage;前者有效期较短,页面关闭就会丢失,注意是页面不是浏览器会话,所以使用较少;后者,不删不会消失
- sessionStorage和localStorage为全局变量,都只能存字符串,可以直接打印使用,
- 两者用法一样sessionStorage.setItem(“数据名字”,“值”)/getItem(“数据名字”)/removeItem(“数据名字”)/clear()
token
- 上述问题,1.安全,本地存储为明文;2.服务器不知道有没有登录
- rest风格服务器是无状态服务器,不在服务器中存储用户的信息,所以不能用session在服务器中存储;实际上将用户信息用token加密后发给客户端保存,客户端每次访问服务器时,直接将用户信息发回,服务器就可以根据用户信息识别用户身份
- 在服务器的创建和接收:
const jwt = require("jsonwebtoken")
const obj = {}
const token = jwt.sign(obj/string,"密码",{
expiresIn:"1h"
})
token = req.get("Authorization").split(" ")[1]
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:{请求体对象}
}).then(res =>{
console.log(res.data)
}).catch(err => {
})
- axios的配置对象:
- baseURL,指定服务器根目录
- url,请求的地址
- method,请求方法,默认get
- headers:{},指定请求头
- data:{},请求体,自动转换为json
- transformRequest:[fun(data,headers),fun],用来处理请求数据,函数数组作为参数,请求发送时,函数会依次执行;对data和headers进行修改,使用return传递数据;最后一个函数必须返回一个字符串,才能使数据有效,用JSON.stringify转换
- transformResponse,处理响应信息,用法同上
- params:{},设置查询字符串
- timeout:1000,请求超时时间,默认0一直等
- signal,用来终止请求
- 响应结构。data+status+statusText+headers+config(请求时的配置)+request(原生的xhr对象)
- 默认配置,使用 axios.defaults.配置属性,来设置全局的默认配置,方便操作
- axios实例,使用const instance=axios.create()创建实例,实例和axios的功能一样,是axios的一个副本,好处是可以单独修改axios实例的默认配置
- axios拦截器,可以在请求发送前和响应读取前拦截并处理数据
const myInterceptors = axios.interceptors.request.use(fun(config){
return config
},fun(err){
return Promise.reject(err)
})
axios.interceptors.request.eject(myInterceptors)