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

Question

是这样的！

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

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

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

想问3个问题：

1. 用方式1会不会有性能问题，localstorage 毕竟不同于普通的函数
2. 方式2的话，如果项目本身用不到 redux, 似乎有点大材小用额～，怪怪的。
3. 是不是又别的方式，大家是怎么处理的呢。

Answer 1

直接把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更新下就行了

Answer 2

一般来说你需要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