MERN栈博客页面重载后需重新登录的问题咨询

问题核心 #

你的路由权限控制逻辑正常，但页面刷新或新开标签后Redux存储的token会丢失——因为Redux store是内存级别的，刷新后会重置为初始状态。结合你已有的JWT+refresh token机制，只需做token持久化存储和应用启动自动恢复登录状态两个关键修改即可解决。

解决方案步骤 #

1. 持久化Token到本地存储 #

修改authSlice.js，让token在本地存储中持久化，同时从本地存储读取初始状态：

import { createSlice } from "@reduxjs/toolkit";

// 从localStorage读取初始token，刷新后自动恢复
const initialState = {
  token: localStorage.getItem('authToken') || null
};

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    setCredentials: (state, action) => {
      const { accessToken } = action.payload;
      state.token = accessToken;
      // 同步存储到localStorage
      localStorage.setItem('authToken', accessToken);
    },
    logOut: (state) => {
      state.token = null;
      // 登出时清除本地存储
      localStorage.removeItem('authToken');
    },
  },
});

export const { setCredentials, logOut } = authSlice.actions;
export default authSlice.reducer;
export const selectCurrentToken = (state) => state.auth.token;

2. 应用启动时自动恢复登录状态 #

在App.js中添加初始化逻辑，启动时调用refresh接口获取新的accessToken（如果refresh token有效）：

import { useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { useRefreshMutation } from './features/auth/authApiSlice';
import { selectCurrentToken } from './features/auth/authSlice';
// 导入你的组件
import Layout from './Layout';
import Login from './Login';
import Home from './Home';
import PostsList from './PostsList';
import SinglePostPage from './SinglePostPage';
import AddPostForm from './AddPostForm';
import EditPostForm from './EditPostForm';
import RequireAuth from './RequireAuth';

export default function App() {
  const dispatch = useDispatch();
  const token = useSelector(selectCurrentToken);
  const [refresh] = useRefreshMutation();

  useEffect(() => {
    const initAuth = async () => {
      // 如果Redux中没有token，尝试用refresh token获取新的accessToken
      if (!token) {
        try {
          await refresh().unwrap();
        } catch (err) {
          console.log('登录状态初始化失败:', err);
        }
      }
    };

    initAuth();
  }, [token, refresh]);

  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="login" element={<Login />} />
        <Route index element={<Home />} />
        <Route path="blog" element={<PostsList />} />
        <Route path="blog/:blogPostId" element={<SinglePostPage />} />
        <Route element={<RequireAuth />}>
          <Route path="add-new-post" element={<AddPostForm />} />
          <Route path="blog/edit/:blogPostId" element={<EditPostForm />} />
        </Route>
        <Route path="*" element={<div>Error 404</div>} />
      </Route>
    </Routes>
  );
}

3. 完善RequireAuth组件（权限验证） #

确保RequireAuth组件能正确解析token中的角色信息，验证是否为管理员：

import { Navigate, Outlet } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { selectCurrentToken } from './authSlice';

// 解析JWT payload获取用户角色
const decodeJWT = (token) => {
  if (!token) return null;
  try {
    // JWT的第二部分是payload，base64解码
    return JSON.parse(atob(token.split('.')[1]));
  } catch (err) {
    console.log('Token解析失败:', err);
    return null;
  }
};

export default function RequireAuth() {
  const token = useSelector(selectCurrentToken);
  const userInfo = decodeJWT(token);

  // 只有管理员能访问受限路由
  if (!token || userInfo?.role !== 'admin') {
    return <Navigate to="/login" replace />;
  }

  return <Outlet />;
}

关键注意事项 #

• 确保后端的/auth/refresh接口配置了httpOnly、secure的refresh token cookie，前端通过credentials: include自动携带，无需手动操作cookie
• 若希望关闭浏览器后自动登出，可替换localStorage为sessionStorage
• 处理refresh token过期的情况：如果refresh接口返回403，直接跳转到登录页

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