react 中使用 axios , 如何获取登录接口返回的 token ?

fcxh
  • 434

是这样的!

项目使用 react + axios , axios 发送请求需要在 header 中设置 token。

问题是,token 是从登录api接口返回的。 那么很明显,这个token值得存储成全局变量。因为其他组件中也要用axios发送接口需要用到这个token。

  1. 存到 localstorage 里,每次发送请求都从 localstorage 中读取。
  2. 用 redux 存储

想问3个问题:

  1. 用方式1会不会有性能问题,localstorage 毕竟不同于普通的函数
  2. 方式2的话,如果项目本身用不到 redux, 似乎有点大材小用额~,怪怪的。
  3. 是不是又别的方式,大家是怎么处理的呢。
回复
阅读 5k
2 个回答
✓ 已被采纳

直接把token设置成默认请求头,每次请求都自动携带。

import axios from 'axios';

const TOKEN_KEY = 'AS_MALL_ACCESS_TOKEN';

axios.defaults.headers.common['Authorization'] = localStorage.getItem(TOKEN_KEY);

token有更新的时候localStorage重新缓存下axios.defaults.headers.common更新下就行了

一般来说你需要localstorage和window(global)配合使用;
首先你从后台获取了token,可以把token赋给window也就是this,这样你在任何地方都可以使用this.token,但是用户一旦关闭浏览器,这个js执行环境消失,第二次再打开浏览器浏览的时候,就需要重新去登录获取token,很显然这并不是我们想要的保存登录信息,那么正确的步骤是:
1,登录成功后,this.token = res.data.token,同时将token存储在localstorage,这样每次请求都用this.token,而不需要去localstorage取
2.当用户关闭了浏览器,下次进入的时候才取localstorage,然后把取到的结果赋给this,也就是this.token = 你取到的token
3.只要当用户退出登录的时候才remove localstorage里面的token

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏