MERN应用重复标签页权限异常：登出后仍可调用API求助

Hey there! I’ve run into this exact scenario with MERN apps before—let’s break down what’s going on and how to fix it.

Root Causes #

This issue boils down to two key gaps: one in your frontend state management, and another in your backend authentication checks.

1. Redux State Doesn’t Sync Across Tabs #

Redux stores state in memory per browser tab. When you log out in the original tab, you clear localStorage and reset Redux there—but the duplicate tab’s Redux store still holds the old authenticated state. Even though localStorage is shared across tabs, the duplicate tab’s Redux doesn’t automatically update unless you explicitly tell it to. So the frontend still thinks the user is logged in and sends requests without checking the latest localStorage state.

2. Backend Isn’t Validating Token Effectiveness #

Even if the duplicate tab somehow sends an old token (or no token at all), your backend API isn’t properly verifying that the token is still valid. For example:

• If you’re using JWT, you might only check the signature and expiration date—but not whether the token was revoked when the user logged out.
• If you’re using session-based auth, you might not be invalidating the session on logout, so the old session ID still works.

Fixes #

Let’s tackle both frontend and backend to lock this down.

Frontend: Sync Redux State Across Tabs #

Add a listener for the storage event, which fires when localStorage changes in another tab. Use this to trigger a logout action in the duplicate tab:

// In your App.js or a dedicated auth utility file
useEffect(() => {
  const handleStorageChange = (e) => {
    if (e.key === 'TOKEN' && e.newValue === null) {
      // Dispatch logout action to clear Redux state
      dispatch(logoutUser());
      // Redirect to login page
      navigate('/login');
    }
  };

  window.addEventListener('storage', handleStorageChange);
  return () => window.removeEventListener('storage', handleStorageChange);
}, [dispatch, navigate]);

Also, update your request interceptor (if using Axios) to check localStorage for the token every time a request is made:

// Axios interceptor setup
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('TOKEN');
    if (!token) {
      // No token found—redirect to login
      window.location.href = '/login';
      return Promise.reject(new Error('No authentication token'));
    }
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => Promise.reject(error)
);

Backend: Strengthen Token Validation #

If you’re using JWT, implement a token blacklist (using Redis is perfect for this) to track revoked tokens. When a user logs out, add their token to the blacklist, and check against it on every API request:

// Example Express middleware for JWT validation with blacklist
const jwt = require('jsonwebtoken');
const redis = require('redis');
const client = redis.createClient();

const authenticateToken = async (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) return res.sendStatus(401);

  // Check if token is in blacklist
  const isBlacklisted = await client.get(`blacklist:${token}`);
  if (isBlacklisted) return res.sendStatus(401);

  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
};

// Logout route
app.post('/logout', authenticateToken, async (req, res) => {
  const token = req.headers['authorization'].split(' ')[1];
  // Add token to blacklist (set expiration matching JWT's expiry)
  await client.setEx(`blacklist:${token}`, 3600, 'true');
  res.sendStatus(200);
});

If you’re using session-based auth with Express and MongoDB, make sure to destroy the session on logout:

app.post('/logout', (req, res) => {
  req.session.destroy((err) => {
    if (err) return res.sendStatus(500);
    res.clearCookie('connect.sid'); // Clear session cookie
    res.sendStatus(200);
  });
});

Bonus: Handle 401 Responses on Frontend #

Add a response interceptor to catch 401 errors from the backend, which will handle cases where the token is invalid even if the frontend state was out of sync:

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      localStorage.removeItem('TOKEN');
      dispatch(logoutUser());
      navigate('/login');
    }
    return Promise.reject(error);
  }
);

These changes will ensure that logging out in one tab invalidates the session across all tabs, and your backend properly blocks any unauthorized requests.

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