调用端点未经授权作为身份验证请求未完全解决

Question

我正在使用 Vue 构建一个连接到 Laravel 后端的小型聊天应用程序。

初始化聊天应用程序时，会调用后端以获取 JWT 并将其存储在 Vuex 和本地存储中。

接下来，为了开始对话，我将到达传递 header 中不记名令牌的终点。但是，它一开始因为未经授权而失败，但如果我使用 Postman 使用令牌到达终点，它就可以工作。

所以这是细分。首先，一个 Vuex 动作：

register ({ commit, rootState }) {
    const apiRequest = {
      chatprofileuid: rootState.global.chatProfileUid
    }

    return Auth.register(apiRequest)
      .then((data) => {
        commit('setAccessToken', data.data.token)
      })
  }

Auth.register调用服务

import { myApi } from './api'
register (data) {
    return myApi.post('client/register', data)
      .then(response => response.data)
      .catch(error => Promise.reject(error.response))
  },

然后是突变

setAccessToken (state, token) {
    localStorage.setItem('accessToken', token)
    state.tokens.access = token
    console.log(`access token is now ${token}`)
  }

效果很好。

接下来，开始对话

createNewConversation ({ commit }) {
    return Conversations.createConversation().then(data => {
      console.log(data)
    })
  }

和 Auth 一样，我有一个 Conversation 服务

import { myApi } from './api'
const endPoint = '/client/conversations'

createConversation () {
    return myApi.post(endPoint)
      .then(response => response.data)
      .catch(error => Promise.reject(error.response))
  }

myApi指的是

import axios from 'axios'

export const myApi = axios.create({
  baseURL: `/api/v1/`,
  headers: {
    Authorization: `Bearer ${localStorage.getItem('accessToken')}`
  }
})

就像我说的，一开始失败了，但几分钟后就成功了，假设是因为 http 承诺已经完全解决。

我觉得 async/await 会在这里有所帮助，但不完全确定应该去哪里。我还没有完全了解 async/await，所以任何指示都会很棒。

Answer 1

你的问题是 ${localStorage.getItem('accessToken') 只评估一次，当 myApi 第一次被导入时，大概你仍然没有存储正确的 accessToken在本地存储

如果您停止并重新加载应用程序，那么它会从之前的执行中读取 accessToken，这可能会起作用（取决于令牌的有效期）

您需要稍微更改一下逻辑，以便在实际对聊天端点进行后续调用时读取并设置 headers 中的令牌

调用端点未经授权作为身份验证请求未完全解决

call to endpoint unauthorised as auth request not fully resolved

jwt

vue.js

es6-promise

vuex

vuex-modules