仅在刷新页面时令牌过期时注销？为什么？

Question

如果令牌过期并执行注销操作，我发现很难理解，最后一个操作仅在页面刷新时执行。虽然当令牌过期时抛出 401 代码，但它仍然使受保护的路由可见，并且只有刷新它才会注销并进入登录。它应该是这样还是不应该发生，我错过了什么？

这是前面的代码

import React, { useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';
import {useDispatch} from 'react-redux'
import { logoutUser } from '../redux/ActionCreators';
import { baseUrl } from '../shared/baseUrl'

export const PrivateRoute = ({ component: Component, ...rest }) => {

    const dispatch = useDispatch()    
    
    useEffect(() => {
        // send jwt to API to see if it's valid
        let token = localStorage.getItem("token");
        if (token) {
            fetch(baseUrl + "protected", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ token })
            })
                .then((res) => {
                    return res.json()
                })
                .then((json) => {
                    if (json.success) {
                    }
                })
                .catch((err) => {
                    dispatch(logoutUser())
                })
        } else {
            dispatch(logoutUser())
        }        
            
        }, [])
        
        
    return (<Route {...rest} render={props => (
        localStorage.getItem('token')
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/users/login', state: { from: props.location } }} />
    )} />)
}

和调用的api

protectedRouter.route('/')
    .options(cors.corsWithOptions, (req, res) => { res.sendStatus(200) })
    .get(cors.cors, authenticate.verifyUser, authenticate.verifyAdmin, async (req, res, next) => {
        res.statusCode = 403
        res.end('Operation not supported')
    })
    .post(cors.corsWithOptions,  async (req, res, next) => {
        const token = req.body.token
        
        if (token) {
         try {
          return jwt.verify(token, process.env.secretKey);
         } catch (err) {
          return null;
         }
        }
        return null;
}) 

Answer 1

可以有多种解决方法，最简单的就是重新渲染组件。只是一个例子。可能不是最干净的，但它会给你一个想法

const dispatch = useDispatch();
const { token, setToken } = useDispatch();

useEffect(() => {
        // send jwt to API to see if it's valid
        const token_from_storage = localStorage.getItem("token");
        setToken(token_from_storage);
        
        if (token_from_storage) {

        fetch(baseUrl + "protected", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ token })
        })
            .then((res) => {
                return res.json()
            })
            .then((json) => {
                if (json.success) {
                }
            })
            .catch((err) => {
                setToken(undefined);
                dispatch(logoutUser())
            })
    } else {
        setToken(undefined);
        dispatch(logoutUser())
    }
}, [])
            
    return (<Route {...rest} render={props => (
                token
                    ? <Component {...props} />
                    : <Redirect to={{ pathname: '/users/login', state: { from:                       
             props.location } }} />
            )} />)

当令牌失效或从存储中找不到时，它将重新渲染组件。 HTH。