Question

我正在与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会有所帮助，但不能完全确定应该去哪里。我还没有完全了解async / await所以任何指针都会很棒。

Answer 1

你的问题是$ {localStorage.getItem（'accessToken'）仅在第一次导入myApi时被评估一次，并且可能你仍然没有在localStorage中存储正确的accessToken

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

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

由于auth请求未完全解决，因此未经授权调用端点

1 个答案: