我的 Typescript React + Firebase 应用程序在刷新时注销答案

【问题标题】：My Typescript React + Firebase App logs out on refresh我的 Typescript React + Firebase 应用程序在刷新时注销
【发布时间】：2021-08-08 23:39:33
【问题描述】：

当用户登录时，我正在初始化一个使用私有路由连接到 Firebase 的 TS React 应用程序。

在我刷新页面之前，一切似乎都运行良好。当我这样做时，应用程序会将我带回到作为登录页面的公共路径。

我认为问题可能是设置为 null 的上下文的初始状态，但可能是另一个问题。

这是我的用户上下文的代码：

import React, { useContext, useState, useEffect } from "react";
import firebase from "firebase/app";
import { auth } from "../firebase";

export const AuthContext = React.createContext<firebase.User | null>(null);

export function useAuth() {
    return useContext(AuthContext);
}

export const AuthProvider: React.FC = ({ children }) => {
    const [user, setUser] = useState<firebase.User | null>(null);

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged((firebaseUser) => {
            setUser(firebaseUser);
        });

        return unsubscribe;
    }, []);

    return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
};

这是我创建私有路由的方式：

import React, { useContext } from "react";
import { Redirect, Route, RouteProps } from "react-router";
import { AuthContext } from "../contexts/AuthContext";

interface IPrivateRoute extends RouteProps {
    component: any;
}

const PrivateRoute = ({ component: Component, ...rest }: IPrivateRoute) => {
    const user = useContext(AuthContext);
    setTimeout(() => console.log(user), 1000);

    return (
        <div>
            <Route
            {...rest}
            render={(props) => {
                return user ? <Component {...props} /> : <Redirect to="/login" />;
            }}>
            </Route>
        </div>
    );
};

export default PrivateRoute;

我将不胜感激所有有用的答案！

【问题讨论】：

你一针见血。您的问题确实源于使用 null 作为您的初始值。您要么需要实现“正在加载用户”变量作为状态的一部分，要么考虑使用 User | null | undefined 类型，其中 undefined 用作“等待我检查”临时值。

标签： javascript reactjs typescript firebase routes

【解决方案1】：

我认为您需要保存会话以保持身份验证。每当您刷新页面时，您的用户状态将为空。

对我有用的是我使用了 JWT。 https://jwt.io/

用户成功登录后，我的服务器向用户发送一个令牌，我将令牌保存在用户的 cookie 中。对于用户请求的每个 PrivateRoute，他们会将令牌发送回服务器进行验证。如果验证成功，则将 PrivateRoute 返回给他们。

【讨论】：