MERN栈JWT存Cookie时刷新获取用户及未登录报错处理问题

问题1：未登录时/myprofile接口401错误干扰登录页表单提示 #

问题原因 #

App.js初始化时会无视当前路由直接发起用户信息拉取请求，未登录状态下该请求触发protect中间件返回401，前端全局响应拦截器会统一弹出该错误提示，覆盖登录页自有表单校验提示。

解决方案 #

• 方案1：全局响应拦截器对/myprofile接口的401错误做静默处理，不触发全局提示，示例代码如下：

// axios响应拦截器示例
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const { config, response: res } = error
    // 仅非用户信息拉取接口的401错误才弹出全局提示
    if (res?.status === 401 && config.url !== '/myprofile') {
      // 原有全局错误提示逻辑
      toast.error(res.data.message)
    }
    return Promise.reject(error)
  }
)

• 方案2：App.js中判断当前路由，仅非公开路由（非登录、注册等无需登录即可访问的页面）才发起用户信息拉取请求：

import { useLocation } from 'react-router-dom'

function App() {
  const { pathname } = useLocation()
  // 公开路由列表可根据实际业务扩展
  const publicRoutes = ['/login', '/register', '/reset-password']

  useEffect(() => {
    if (!publicRoutes.includes(pathname)) {
      store.dispatch(loadUser())
    }
  }, [pathname])

  // 其余App逻辑
}

两种方案可搭配使用，效果更稳定。

问题2：登录成功后头部无法立即显示用户名，需刷新才展示 #

问题原因 #

当前仅在App初始化时触发一次loadUser拉取用户信息，登录成功后没有主动更新store中存储的用户状态，头部组件读取的仍是旧的空值，只有页面刷新重新触发loadUser才能拿到最新用户信息。

解决方案 #

两种可选方案任选其一即可：

• 方案1（无额外请求，性能更高）：登录接口请求成功后，直接将接口返回的用户信息同步更新到store的用户状态中：

// 登录action示例
export const login = (formData) => async (dispatch) => {
  const res = await axios.post('/login', formData)
  // 登录成功后直接更新用户状态
  dispatch({
    type: 'LOAD_USER_SUCCESS',
    payload: res.data.user
  })
  // 后续跳转等逻辑
}

• 方案2（数据一致性更高）：登录成功后主动调用一次loadUser拉取最新用户信息：

// 登录提交回调示例
const handleLoginSubmit = async (values) => {
  await loginApi(values)
  // 主动触发用户信息拉取
  store.dispatch(loadUser())
  navigate('/home')
}

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