nuxt 在其他js文件里获取 vuex存储的token值

Question

题目描述

最后使用nuxt开发一个demo，有一个需求要将登录之后获取到的token值存储到http的头信息里，放在Authorization字段上。

题目来源及自己的思路

通过vuex存储token，在axios拦截器里判断是否有token值，如果有就将token值设置给Authorization字段

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

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

TOKEN: '', //存储登录token,用来写入到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)

}
)
// 返回状态判断
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
})

}
}

你期待的结果是什么？实际看到的错误信息又是什么？

目前在axios的request拦截器里取到的是state的默认值，并不是我请求login接口拿到token之后设置的token值。
1.这里跟使用store()带括号没有关系，反而在nuxt里不带括号会报错；
2.在pages里的vue文件里能拿到设置之后的token值，控制台看了也能设置成功，但就是在其他的js文件里获取不到。

走过路过的烦请帮忙看看在axios的拦截器里应该怎么获取改变之后的token值，不胜感激~

Answer 1

已自行解决，最后采用的方式是js-cookie，以上有两个地方需要改动：

1.store/index.js
sessionStorage.setItem('token', res.data.token);换成Cookies.set('token', res.data.token);
2.plugins/axios.js
let token = store().state.TOKEN;换成let token = Cookies.get('token');
存储和获取的地方都改成使用Cookies的方式即可

使用js-cookie之前需要安装和引用，详情戳链接~

Answer 2

问题的发布时间已经两年多了, 我也是苦恼同一个问题找到这来的 最后解决了,发出我的解决方法希望能帮助更多像我这样的人

我是这样做的:
在nuxt.config.js内引入Axios和axios.js插件 这步不用多说

  plugins: [
    { src: '~/plugins/axios.js' }
  ]
  modules: [
    '@nuxtjs/axios'
  ],

在axios.js中:

import Vue from 'vue'

export default function ({ store, app: { $axios } }) {
  // 注意这里: 我试过各种操作 都不能响应更新数据 但是向下面这样写就可以了!
  $axios.onRequest(config => {
    config.headers.common['user-token'] = store.state.userToken
  })
  // 这里是收到请求后的操作, 无关问题
  $axios.onResponse(res => {
    let data = res.data
    switch (data.code){
      case 500:
        if (data.message) {
          Vue.prototype.$message.error(data.message)
        } else {
          Vue.prototype.$message.error('请求出现错误')
        }
        break
      case -1:
        if (data.message) {
          Vue.prototype.$message.error(data.message)
        }
        store.commit('writeInToken', null)
    }
    return res.data
  })
  $axios.onError(error => {
    Vue.prototype.$message.error(`请求服务器失败! `)
    return error
  })
}

Answer 3

我也不是很懂，能粘贴一个完整的代码吗