react的axios添加token和token失效验证

1代码如下:

import axios from 'axios'
import store from '../store'

const instance = axios.create({
  baseURL: '/api',	// 通过使用配置的proxy来解决跨域
  timeout: 5000
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  let token = localStorage.getItem("x-auth-token");
  if (token) {
    config.headers = {
      "x-auth-token": token
    }
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  if (error.response.data.errCode === 1002) {
    // token过期,先告诉用户登录失效,并重新登录
    store.dispatch({
      typr: 'showAlert', value: {
        alertType: 'error',
        alertContent: '登录失效,即将跳转登录页'
      }
    })
    setTimeout(() => {
      // 关闭alert弹框
      store.dispatch({ type: 'hideAlert' });
      // 跳转登录页,开发阶段都是在locahast:8080根路径下开发,所以可以用window.location.href='/login',
      // window.location.href='/login'
      // 项目上线,由于路由模式改成啦HashRouter。所以应该修改的是hash值
      window.location.hash = '#/login'
    }, 2000)

  }
  // 对响应错误做点什么
  return Promise.reject(error);
});
// deng登录过期与token过期



export default instance;

 1.token失效验证:在响应拦截器的错误回调中编写逻辑

if (error.response.data.errCode === 1002) {
    // token过期,先告诉用户登录失效,并重新登录
清空token
// window.location.href='/login'
      // 项目上线,由于路由模式改成啦HashRouter。所以应该修改的是hash值
//跳转到首页
 window.location.hash = '#/login'
}

2.在请求拦截器成功回调中加token

let token = localStorage.getItem("x-auth-token");
  if (token) {
    config.headers = {
      "x-auth-token": token
    }
  }

3axios传参

get传参

export const GetloginApi=(params)=>requset.get('/usrer/home' ,{params})

post传参

export const PostloginApi=(params)=>requset.post('/usrer/home' ,params)

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值