(Nuxt.js/Vue.js) 在 Vuex 商店中设置 axios 身份验证令牌在刷新后重置答案

【问题标题】：(Nuxt.js/Vue.js) Setting axios auth token in Vuex store resets after refresh(Nuxt.js/Vue.js) 在 Vuex 商店中设置 axios 身份验证令牌在刷新后重置
【发布时间】：2018-01-23 13:19:27
【问题描述】：

我有以下存储代码来处理登录、注销、获取用户并将令牌设置为所有 axios 请求作为身份验证标头。

它适用于客户端渲染，比如我去登录页面，登录，获取令牌，将其存储在 cookie 中。但是当我刷新页面时，似乎没有再设置令牌了。我我在 NuxtServerInit 上调用 fetch 操作，仍然没有运气......我的代码失败的任何想法？

这是我的 store/index.js 文件：

https://jsfiddle.net/3dc07yv4/

import Cookie from 'cookie'
import Cookies from 'js-cookie'

export const state = () => ({
  sidebar: true,
  token: null,
  user: null
})

export const mutations = {
  // SET SIDEBAR
  toggleSidebar (state) {
    state.sidebar = !state.sidebar
  },
  // SET USER
  setUser (state, user) {
    state.user = user
  },
  // SET TOKEN
  setToken (state, token) {
    state.token = token
  }
}

export const getters = {
  loggedIn (state) {
    return Boolean(state.user && state.token)
  }
}

export const actions = {
  async nuxtServerInit ({ dispatch }, { req }) {
    await dispatch('fetch')
  },
  // Update token
  async updateToken ({ commit }, token) {
    // Update token in store's state
    commit('setToken', token)
    // Set Authorization token for all axios requests
    console.log('Setting axios token to: ', token)
    this.$axios.setToken(token, '')
    // Update cookies
    if (process.browser) {
      // ...Browser
      if (token) {
        Cookies.set('ccmsToken', token, { expires: 1 })
      } else {
        Cookies.remove('ccmsToken')
      }
    } else {
      // ...Server
      let params = {
        domain: '/'
      }
      if (!token) {
        let expires
        let date = new Date()
        expires = date.setDate(date.getDate() + 1)
        params.expires = new Date(expires)
      }
      this.app.context.res.setHeader('Set-Cookie', Cookie.serialize('ccmsToken', token, params))
    }
  },

  // Fetch Token
  async fetchToken ({ dispatch }) {
    let token
    // Try to extract token from cookies
    if (!token) {
      const cookieStr = process.browser ? document.cookie : this.app.context.req.headers.cookie
      const cookies = Cookie.parse(cookieStr || '') || {}
      token = cookies['ccmsToken']
    }
    if (token) {
      await dispatch('updateToken', token)
    }
  },

  // Reset
  async reset ({ dispatch, commit }) {
    commit('setUser', null)
    await dispatch('updateToken', null)
  },

  // Fetch
  async fetch ({ getters, state, commit, dispatch }, username = 'admin', { endpoint = 'http://localhost:8000/api/user' } = {}) {
    // Fetch and update latest token
    await dispatch('fetchToken')
    // Skip if there is no token set
    if (!state.token) {
      return
    }

    // Try to get user profile
    try {
      const data = await this.$axios.$get(endpoint + '?username=' + username)
      commit('setUser', data)
    } catch (e) {
      // Reset store
      await dispatch('reset')
    }
  },

  // Login
  async login ({ dispatch }, { fields, endpoint = 'http://localhost:8000/api/login' } = {}) {
    try {
      // Send credentials to API
      let data = await this.$axios.$post(endpoint, fields)
      if (data.success) {
        await dispatch('updateToken', data['token'])
        // Fetch authenticated user
        await dispatch('fetch', data.user.username)
      } else {
        throw new Error(data.message)
      }
    } catch (error) {
      if (error.response && error.response.status === 401) {
        throw new Error('Bad credentials')
      }
      throw error
    }
  },

  // Logout
  async logout ({ dispatch, state }) {
    try {
      await dispatch('reset')
    } catch (e) {
      console.error('Error while logging out', e)
    }
  }

}

【问题讨论】：

使用 vue-auth 模块
这根本没有帮助。
该模块为您完成了大部分繁琐的工作，因此它确实有所帮助，它会自动将令牌保存在 localStorage 和/或 cookie 中，并在刷新时获取用户详细信息。我目前正在使用它，并且在刷新我的令牌和登录状态时会保留
我没有看到使用模块的意义，因为我有更多的控制权自己编写身份验证存储模块。无论模块如何，您都不会重新发明轮子。
这取决于个人喜好，但你有一个坚实的观点。回到代码，你说登录后cookies有，刷新后会消失吗？

标签： javascript vue.js axios vuex nuxt.js

【解决方案1】：

我通过实现一个拦截器解决了这个问题，该拦截器将令牌注入到每个 axios 请求的标头中。它看起来像这样：

export default ({ $axios, store }) => {
  $axios.defaults.baseURL = 'https://api.com/api/'

  if (process.server) {
    return
  }

  $axios.interceptors.request.use(request => {
    request.baseURL = 'https://api.com/api/'

    // Get token from auth.js store
    const token = store.state.token

    // Update token axios header
    if (token) {
      request.headers.common['Authorization'] = token
    }
    return request
  })
}

您将其用作 nuxt 插件。

【讨论】：

这是一个很好的解决方案。当然帮助了我。我不确定它是如何发生的，但我认为我遇到的问题与时间有关，或者您从 axios 插件访问商店的确切位置。当我在空插件中访问我的store.state.Auth.token 时，只使用控制台日志查看它是否正常工作，如果直接访问，我总是得到观察者对象和空值（我认为它后来由于观察者而更新）如果我访问在拦截器中以相同的方式编写这样的值，这一切都很好。魔术。

【解决方案2】：

我也遇到了同样的问题。上一个回答中，我在每个请求中都放了headers，但是嵌套路由的二级页面会让token消失。

const service = axios.create({
    baseURL: 'http://127.0.0.1:9012',
    timeout: 30000, 
    headers: {'Authorization': 'Bearer '+ getUser().token  }
  })

【讨论】：