ログイン、ログアウトを処理し、ユーザーをフェッチし、トークンをすべてのaxiosリクエストに認証ヘッダーとして設定するための次のストアコードがあります。
ログインページに移動し、ログインしてトークンを取得し、Cookieに保存すると、クライアント側のレンダリングでうまく機能します。しかし、ページを更新すると、トークンが設定されていないようです。 NuxtServerInitでアクションをフェッチしますが、まだ運がありません。コードが失敗しているアイデアはありますか?
これが私の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)
}
}
}
すべての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 }
})