持有有效JWT令牌却无法加载用户的认证问题排查

我帮你排查了代码里的几个关键问题，这些应该就是导致你认证状态异常、token无效的核心原因：

1. loadUser 异步Thunk的参数与请求错误 #

你在定义loadUser时，把Thunk API的解构位置写错了，而且请求还漏掉了await：

• createAsyncThunk的第一个参数是传入的payload（这里我们不需要传参，用_占位即可），第二个才是包含rejectWithValue的Thunk API对象
• axios.get没有加await的话，res会是Promise对象，直接取res.data会导致错误

修正后的代码：

export const loadUser = createAsyncThunk(
  'user/loadUser',
  async (_, { rejectWithValue }) => { // 第一个参数用_占位，第二个参数解构Thunk API
    if(localStorage.token){
      setAuthToken(localStorage.token);
    }
    try {
      const res = await axios.get('http://localhost:3000/api/auth'); // 添加await
      return res.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
)

2. setAuthToken 里的拼写错误 #

你在删除请求头时把x-auth-token写成了x-atuh-token（字母顺序错误），导致token无法被正确清除，后续请求的认证头会混乱：

const setAuthToken = token => {
  if(token){
    axios.defaults.headers.common['x-auth-token'] = token;
  } else {
    delete axios.defaults.headers.common['x-auth-token']; // 修正拼写错误
  }
}

3. 状态更新时token赋值错误 #

在registerUser.fulfilled和loginUser.fulfilled里，你直接把localStorage.setItem的返回值赋值给state.token，但setItem的返回值是undefined，这会导致state.token变成无效值。应该先存储token到本地，再把实际token值赋值给状态：

修正registerUser的fulfilled逻辑：

[registerUser.fulfilled]: (state, action) => {
  localStorage.setItem('token', action.payload.token); // 先存本地
  state.token = action.payload.token; // 再赋值给状态
  state.user = action.payload;
  state.loading = false;
  state.error = null;
},

修正loginUser的fulfilled逻辑：

[loginUser.fulfilled]: (state, action) => {
  localStorage.setItem('token', action.payload.token); // 先存本地
  state.token = action.payload.token; // 再赋值给状态
  state.isAuthenticated = true;
  state.loading = false;
  state.user = action.payload.user;
},

4. loadUser.fulfilled 的错误状态赋值问题 #

你在loadUser.fulfilled里把state.error设为false，但error字段应该存储错误信息或者null，改成null更符合逻辑：

[loadUser.fulfilled]: (state, action) => {
  state.isAuthenticated = true;
  state.user = action.payload;
  state.loading = false;
  state.error = null; // 修正为null
},

把这些问题全部修正后，再测试注册/登录流程，应该就能正确设置认证状态、存储有效token，并且成功加载用户信息了。

备注：内容来源于stack exchange，提问作者tukitooo1998