设置token后，获取currentuser返回401

Question

login (state, rawData) {
      if (rawData.code === 0) {
        const { token } = rawData.data
        state.token = token
        axios.defaults.headers.common.Authorization = `Bearer ${token}`
      }

actions:
fetchCurrentUser ({ commit }) {
      getAndCommit('/user/current', 'fetchCurrentUser', commit)
    }

mutations:
fetchCurrentUser (state, rawData) {
      console.log(rawData)
    }

我从返回中查看请求头部，确实是附带了token，token是可以通过swagger的测试的

请老师指点迷津

Answer 1

张轩 2020-10-16 09:45:04

同学你好 我今天早晨又用了你新的代码 跑了完全没问题啊

当然我稍微改了一下你的代码 我用的用户名 [e-mail] 密码 111111

我就是在 login 以后 dispatch 了 fetchCurrentUser，你之前注释掉了

还有你的 action 没有返回

fetchCurrentUser ({ commit }) {
  return getAndCommit('/user/current', 'fetchCurrentUser', commit)
}

store.dispatch('login', payload).then(rawData => {
  if (rawData.data.token) {
    store.dispatch('fetchCurrentUser')
  router.push('/')
  }
})

截图如下：

• 提问者 Linx #1

  谢谢老师，我证实是环境问题。
  我重新开了台虚拟机，然后重新配置环境，就跑通了。我换一台机开发吧?
  非常感觉老师的耐心

Answer 2

张轩 2020-10-15 18:15:48

1你把本地的 token 清除一下，然后重新登录就可以了，我估计你之前的 token 已经过期或者失效了，我清除了一下本地的 localStorage，重新登录就没问题了

在后面的内容会有针对token 过期的处理

2 你的另外一个问题，因为我们是跨域请求，都要有一个 options 请求，这个请求称之为 preflight，看这个文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 然后搜索 preflight

• 提问者 Linx #1

  老师，我是直接测试登录的。难道是不会覆盖的？我写一点比较token的逻辑，再试试，谢谢老师抽空解答

• 提问者 Linx #2

  老师，我已经设置了app挂载时判断并log(token)，同时在用户下拉面板里增加了一个fetchCurUser，也设置了logout可以清空token。。结果还是401。。老师有空的话请直接跑我的代码尝试登陆，我的icode还有10天有效。
  新的代码我已经push了

Answer 3

qq_慕前端0178666 2020-10-15 16:05:38

啊啊啊

• 提问者 Linx #1

  ???

Answer 4

张轩 2020-10-15 09:26:32

同学你好 我在本地试了慕课网的接口 使用的应该是和你一样的测试用户 看的请求应该是没问题 我需要本地调试一下 可以把源代码发我一下 gitee 或者 github，或者你可以直接在 postman 里面导出请求，我在本地试一下你的请求

• 提问者 Linx #1

  麻烦老师了，https://git.imooc.com/shayu920/vue3.ts.git，
  我在想会不会是异步的问题，以前用flask没遇到这种问题

• 提问者 Linx #2

  老师，我加了一张图，显示响应的信息