Question

我有一个示例vue应用，我尝试添加身份验证。

此应用程序的后端在成功登录后返回一个jwt字符串。

问题是登录后没有提取项目。

但是如果我手动刷新页面，则加载项目列表时没有任何错误

登录

  mounted () {
    this.fetchProjects()
  }

项目视图包含以下内容

GET http://localhost:3000/api/v1/projects/ 401 (Unauthorized)
Uncaught (in promise) Error: Request failed with status code 401(…)

错误

const config = {
  headers: {
    'Authorization': 'Bearer: ' + window.localStorage.getItem('access_token')
  }
}

export default {
  fetchProjects: () => {
    return axios.get(Projects, config)
  }
}

向上（项目api）

{{1}}

Answer 1

您应该使用函数返回标头，如下所示：

function getHeaders() {
   return {
     'Authorization': 'Bearer: ' + 
     window.localStorage.getItem('access_token')
   }  
}

Answer 2

设置localStorage后，您需要更新config.headers.Authorization。否则只有在刷新页面时它才会生效。

在重新加载页面之前，Vuejs在登录时没有看到localStorage项目

2 个答案: