鍍金池/ 問(wèn)答/HTML/ react 中使用 axios ， 如何獲取登錄接口返回的 token ?

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

是這樣的！

項(xiàng)目使用 react + axios , axios 發(fā)送請(qǐng)求需要在 header 中設(shè)置 token。

問(wèn)題是，token 是從登錄api接口返回的。 那么很明顯,這個(gè)token值得存儲(chǔ)成全局變量。因?yàn)槠渌M件中也要用axios發(fā)送接口需要用到這個(gè)token。

  1. 存到 localstorage 里，每次發(fā)送請(qǐng)求都從 localstorage 中讀取。
  2. 用 redux 存儲(chǔ)

想問(wèn)3個(gè)問(wèn)題：

  1. 用方式1會(huì)不會(huì)有性能問(wèn)題，localstorage 畢竟不同于普通的函數(shù)
  2. 方式2的話，如果項(xiàng)目本身用不到 redux, 似乎有點(diǎn)大材小用額～，怪怪的。
  3. 是不是又別的方式，大家是怎么處理的呢。
回答
編輯回答
懶豬

一般來(lái)說(shuō)你需要localstorage和window(global)配合使用;
首先你從后臺(tái)獲取了token,可以把token賦給window也就是this,這樣你在任何地方都可以使用this.token,但是用戶一旦關(guān)閉瀏覽器，這個(gè)js執(zhí)行環(huán)境消失，第二次再打開(kāi)瀏覽器瀏覽的時(shí)候，就需要重新去登錄獲取token,很顯然這并不是我們想要的保存登錄信息，那么正確的步驟是：
1，登錄成功后，this.token = res.data.token,同時(shí)將token存儲(chǔ)在localstorage，這樣每次請(qǐng)求都用this.token，而不需要去localstorage取
2.當(dāng)用戶關(guān)閉了瀏覽器，下次進(jìn)入的時(shí)候才取localstorage，然后把取到的結(jié)果賦給this,也就是this.token = 你取到的token
3.只要當(dāng)用戶退出登錄的時(shí)候才remove localstorage里面的token

2017年8月10日 00:30
編輯回答
遺莣

直接把token設(shè)置成默認(rèn)請(qǐng)求頭，每次請(qǐng)求都自動(dòng)攜帶。

import axios from 'axios';

const TOKEN_KEY = 'AS_MALL_ACCESS_TOKEN';

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

token有更新的時(shí)候localStorage重新緩存下axios.defaults.headers.common更新下就行了

2017年11月9日 22:34