怎么做好网站开发、设计,虚拟云手机 免费,钓鱼网站教程,网站建设可行性方案目录管理 基地址存储 在utils/request.js配置axios请求基地址
作用#xff1a;提取公共前缀地址#xff0c;配置后axios请求时都会baseURLurl 填写API的公共前缀后#xff0c;将js文件导入到html文件中
script src../../utils/request.js/script提取公共前缀地址配置后axios请求时都会baseURLurl 填写API的公共前缀后将js文件导入到html文件中
script src../../utils/request.js/script
再使用axios请求接口的时候只写API地址后半段 token
概念访问权限的令牌本质上是一串字符串
创建正确登录后由后端签发并返回
作用判断是否有登录状态等控制访问权限 注意前端只能判断token有无而后端才能判断token的有效性
如果很多接口都需要用header传递token那么可以在请求拦截器里统一设置公共headers选项
官网拦截器 | Axios中文文档 | Axios中文网
axios请求拦截器
发起请求之前触发的配置函数对请求参数进行额外配置
在utils/request.js中配置拦截器 // 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么//统一携带token令牌字符串在请求头上const token localStorage.getItem(token)token (config.headers.Authorization token)return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});
axios响应拦截器
响应回到then/catch之前触发的拦截函数对响应结果统一处理 // 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么例如统一对401身份验证失败情况做出处理if(error?.response?.status 401){alert(身份验证失败请重新登录)}return Promise.reject(error);});
优化响应结果可以观察返回信息的层级把return response改为return response.data或其他这样获取到的返回信息都由response下的信息变为了response.data下的信息
