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
    评论
首先,你需要安装 axiosreact-router-dom 两个库。 在你的登录页面组件中,你可以创建一个函数来处理提交表单的逻辑,如下所示: ```javascript import axios from 'axios'; import { useHistory } from 'react-router-dom'; function Login() { const history = useHistory(); const handleSubmit = async (event) => { event.preventDefault(); const { email, password } = event.target.elements; try { const response = await axios.post('/api/auth/login', { email: email.value, password: password.value, }); // 如果登录成功,将 token 存储在本地存储中 localStorage.setItem('token', response.data.token); // 跳转到主页 history.push('/'); } catch (error) { console.error(error); } }; return ( <form onSubmit={handleSubmit}> <label> Email: <input type="email" name="email" /> </label> <label> Password: <input type="password" name="password" /> </label> <button type="submit">Login</button> </form> ); } export default Login; ``` 在上面的代码中,我们使用了 `axios.post()` 方法来与后端 API 进行通信。在成功登录后,我们将从响应中获取的 token 存储在 localStorage 中,并使用 `history.push()` 方法将用户重定向到主页。 请注意,在上面的代码中,我们使用了 `useHistory()` 钩子来获取 `history` 对象。这个钩子可以在 React Router v5 中使用,它允许我们在组件中进行编程式导航。 当然,这只是一个简单的示例,你需要根据你的应用程序的需要来修改这个代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值