React+Redux Toolkit中首次获取localStorage accessToken为空问题求助

问题根源 #

你定义的contentTypeHeaderWithToken是一个静态对象常量，当token.ts模块被加载时，localStorage.getItem('accessToken')会立即执行并赋值给Authorization字段。如果此时accessToken还没被存入localStorage（比如页面初始化时模块先加载，之后才完成登录存token），这个字段就会是空值，而且后续即使localStorage里有了token，这个静态对象的值也不会自动更新。

修复方案 #

把静态对象改成函数，每次发起请求时再动态获取最新的token值：

修改token.ts文件 #

export const getContentTypeHeaderWithToken = () => ({
  'headers': {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
  }
});

在Redux Toolkit中调用修改后的函数 #

export const fetchAllRoles = createAsyncThunk<IGetRolesResponse>(
  'user/getroles',
  async (user, {rejectWithValue}) => {
    try {
      // 每次请求都调用函数获取最新的请求头
      const response = await Services.get('/roles', getContentTypeHeaderWithToken());
      return response.data.slice().reverse() as IGetRolesResponse;
    } catch(err) {
      const error = err as any;
      return rejectWithValue(error?.response?.data)
    }
  },
);

这样每次执行请求时，都会重新从localStorage中读取最新的accessToken，就能避免首次执行时Authorization字段为空的问题。

内容的提问来源于stack exchange，提问作者Nikhil