Node+Express+React项目Session超时后无法跳转至登录页求解

Hey there! Let's figure out how to get that automatic redirect to your React login page working when the session times out. Since you're working with a separated Node.js/Express backend and React frontend, we need to handle this properly across both ends—here's how:

First, let's adjust your Express backend to send the right signals instead of trying to redirect directly (which won't work for AJAX requests from your React app):

• Update your authentication middleware to return a 401 Unauthorized response instead of a redirect. Redirects work for server-rendered pages, but React apps use AJAX/fetch calls that won't automatically follow server-side redirects. Here's an example of what that middleware might look like:

// Your custom auth middleware
const requireAuth = (req, res, next) => {
  // Adjust this check to match how you store authenticated user data in the session
  if (req.session && req.session.user) { 
    return next();
  } else {
    // Send 401 status instead of redirecting
    return res.status(401).json({ message: 'Session expired or not authenticated' });
  }
};

// Apply this middleware to all protected routes
app.get('/api/protected-data', requireAuth, (req, res) => {
  // Your route logic here
});

• Configure CORS correctly (since your React app runs on port 8009 and Express is likely on a different port). You need to allow credentials and the correct origin so session cookies can be shared cross-domain:

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:8009',
  credentials: true // Enables session cookie transfer between frontend and backend
}));

• Double-check your session cookie settings to ensure they work for cross-domain scenarios:

app.use(session({
  secret: 'Test Service',
  name: 'app-session-id',
  resave: false,
  saveUninitialized: false,
  cookie: {
    secure: process.env.NODE_ENV === 'production', // Set to true if using HTTPS
    httpOnly: true,
    sameSite: 'lax', // Use 'none' if needed for cross-domain, but ensure secure is true
    maxAge: 24 * 60 * 60 * 1000 // Adjust timeout duration as needed (e.g., 1 day)
  }
}));

Now your React app needs to catch those 401 responses and redirect to the login page. Set up a response interceptor for your HTTP client (Axios or fetch):

If using Axios: #

Create a reusable Axios instance with an interceptor to handle 401s:

import axios from 'axios';

// Initialize Axios with your backend URL and credentials enabled
const apiClient = axios.create({
  baseURL: 'http://localhost:YOUR_BACKEND_PORT', // Replace with your backend port
  withCredentials: true // Sends session cookies with every request
});

// Add response interceptor
apiClient.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (error.response?.status === 401) {
      // Redirect to React login page
      window.location.href = 'http://localhost:8009/login';
    }
    return Promise.reject(error);
  }
);

export default apiClient;

If using fetch: #

Wrap fetch in a utility function to handle 401 redirects:

export const authenticatedFetch = async (url, options = {}) => {
  const config = {
    credentials: 'include', // Ensures session cookies are sent
    ...options
  };

  const response = await fetch(`http://localhost:YOUR_BACKEND_PORT${url}`, config);
  
  if (response.status === 401) {
    window.location.href = 'http://localhost:8009/login';
    throw new Error('Session expired, please log in again');
  }

  return response;
};

If you have any server-rendered routes or cases where users might directly access a protected backend endpoint, add a redirect to the React login page:

app.get('/protected-server-page', requireAuth, (req, res) => {
  // Redirect to React login if session is invalid
  res.redirect('http://localhost:8009/login');
});

That should do it! Now whenever your session times out, the backend will send a 401, your React app will catch it, and automatically redirect the user to your login page.

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