0

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

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

接下来，要开始对话，我将到达一个在标头中传递不记名令牌的端点。但是，它起初因未经授权而失败，但如果我使用 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 在这里会有所帮助，但不完全确定应该去哪里。我还没有完全理解异步/等待，所以任何指针都会很棒。

4

1 回答 1

0

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

如果您停止并重新加载应用程序，那么它将从上一次执行中读取 accessToken 并且可能会起作用（取决于令牌的到期期限）

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

于 2018-03-15T23:16:40.750 回答