0

我是 React 的新手。当用户单击注销按钮时,上下文函数注销调用并删除 localStorage 令牌并清空所有变量。一瞬间,变量确实变空了,但随后又被填充了。我检查了我的注销功能,但找不到任何错误。localStorage 正在完美地破坏,但其他状态变量没有被擦除。

AuthState.js

    // Load User
    const loadUser = async () => {
        if(localStorage.token) {
            setAuthToken(localStorage.token);
        }

        try {
            const res = await axios.get('/api/auth');

            dispatch({
                type: USER_LOADED,
                payload: res.data
            });

            loadUser();
        } catch (err) {
            dispatch({type: AUTH_ERROR});
        }
    }

    // Logout User
    const logout = () => dispatch({type: LOGOUT});

authReducer.js

        case LOGOUT:
            localStorage.removeItem('token');
            return {
                ...state,
                token: null,
                isAuthenticated: false,
                loading: false,
                user: null,
                error: action.payload
            }

导航栏.js

export const Navbar = ({ title, icon }) => {
    const authContext = useContext(AuthContext);

    const { isAuthenticated, user, logout } = authContext; 

    const onLogout = () => {
        logout();
        console.log('user');
        console.log(user);
    };

    const authLinks = (
        <Fragment>
            <li>
                Hello {user && user.name}
            </li>
            <li>
                <a onClick={onLogout} href="#!">
                    <i className="fas fa-sign-out-alt" /> <span className="hide-sm">Logout</span>
                </a>
            </li>
        </Fragment>
    )

    const guestLinks = (
        <Fragment>
            <li>
                <Link to="/register">Register</Link>
            </li>
            <li>
                <Link to="/login">Login</Link>
            </li>
        </Fragment>
    )

    return (
        <div className="navbar bg-primary">
            <h1>
                <i className={ icon } /> <Link to="/">{ title }</Link>
            </h1>
            <ul>
                {isAuthenticated ? authLinks : guestLinks}
            </ul>
        </div>
    )
}

单击注销按钮后,每个值都会返回,但令牌会被完美删除。下面的截图

在此处输入图像描述

4

1 回答 1

-1

It worked now. I guess all I needed to do was remove if block from setAuthToken in loadUser().

于 2021-08-01T12:50:58.900 回答