nuxt 在其他js文件里獲取 vuex存儲(chǔ)的token值

題目描述

最后使用nuxt開(kāi)發(fā)一個(gè)demo，有一個(gè)需求要將登錄之后獲取到的token值存儲(chǔ)到http的頭信息里，放在Authorization字段上。

題目來(lái)源及自己的思路

通過(guò)vuex存儲(chǔ)token，在axios攔截器里判斷是否有token值，如果有就將token值設(shè)置給Authorization字段

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = () => new Vuex.Store({
state: {

TOKEN: '', //存儲(chǔ)登錄token,用來(lái)寫(xiě)入到header頭的Authorization中

},
mutations: {

SET_TOKEN: (state, token) => {
  debugger
  state.TOKEN = token;
}

},
getters: {

token(state) {
  return state.TOKEN
}

},
actions: {

login: ({commit}, {username, password}) => {
  fetch(process.env.baseUrl + '/auth',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username,
        password
      })
    }
    ).then((res) => {
      if (res.status === 401) {
        throw new Error('Bad credentials')
      } else {
        return res.json()
      }
    })
    .then((res) => {
      if (res && res.data) {
        if (res.data.status == 0) {
          if (res.data.token) {
            commit('SET_TOKEN', res.data.token);
            sessionStorage.setItem('token', res.data.token);
          }
        }
      }
    })
}

}
});
export default store

plugins/axios.js
import axios from 'axios'
import qs from 'qs'
import store from '../store'
const service = axios.create();
// POST 傳參序列化
service.interceptors.request.use(
config => {

let token = store().state.TOKEN;
console.log(token)
debugger;
if (token) {
  config.headers.Authorization = token
}
if (config.method === 'post') {
  config.data = qs.stringify(config.data);
}
return config

},
error => {

return Promise.reject(error)

}
)
// 返回狀態(tài)判斷
service.interceptors.response.use(
res => {

debugger
return res.data

},
error => {

debugger
return Promise.reject(error)

}
)

export default {
post(url, data) {

debugger
return service({
  method: 'post',
  url,
  params: data
})

},
get(url, data) {

debugger;
return service({
  method: 'get',
  url,
  params: data
})

},
delete(url, data) {

return service({
  methods: 'delete',
  url,
  params: data
})

}
}

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

目前在axios的request攔截器里取到的是state的默認(rèn)值，并不是我請(qǐng)求login接口拿到token之后設(shè)置的token值。
1.這里跟使用store()帶括號(hào)沒(méi)有關(guān)系，反而在nuxt里不帶括號(hào)會(huì)報(bào)錯(cuò)；
2.在pages里的vue文件里能拿到設(shè)置之后的token值，控制臺(tái)看了也能設(shè)置成功，但就是在其他的js文件里獲取不到。

走過(guò)路過(guò)的煩請(qǐng)幫忙看看在axios的攔截器里應(yīng)該怎么獲取改變之后的token值，不勝感激~