(Nuxt.js/Vue.js) 새로 고침 후 Vuex 저장소에서 액시오스 인증 토큰 설정 리셋

(Nuxt.js/Vue.js) 새로 고침 후 Vuex 저장소에서 액시오스 인증 토큰 설정 리셋

로그인, 로그아웃, 사용자 가져오기 및 모든 Axios 요청에 대한 토큰을 auth 헤더로 설정하기 위한 다음과 같은 스토어 코드가 있습니다.

클라이언트측 렌더에서는, 예를 들면 로그인 페이지에 액세스 해, 로그인 해, 토큰을 취득해, 쿠키에 보존합니다.하지만 페이지를 새로 고치면 토큰이 설정되지 않은 것 같습니다.NuxtServerInit에서 가져오기 액션을 호출합니다. 아직 운이 없습니다.내 코드가 어디서 고장났는지 알아?

다음은 내 스토어/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)
    }
  }

}

이 문제는 모든 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 플러그인으로 사용합니다.

저도 같은 문제가 발생했습니다.이전 답변에서는 각 요구에 헤더를 넣었는데 네스트된 루트의 세컨더리 페이지에 의해 토큰이 사라집니다.

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

언급URL : https://stackoverflow.com/questions/48402747/nuxt-js-vue-js-setting-axios-auth-token-in-vuex-store-resets-after-refresh