登录后如何禁用地址栏链接

Question

我正在尝试创建身份验证系统，反应一切正常。 如果没有用户，我有一个私有路由，然后它会重定向到登录页面。

这是我的私人路线

import React from 'react'
import { Navigate} from 'react-router-dom'
import { useAuth } from '../../context/AuthContext'

export default function PrivateRoute({children}) {
    const { currentUser } = useAuth()
    
    if(!currentUser){
        return <Navigate to= '/login' />
    }

    return children;
}

问题是登录后我会重定向到更新配置文件页面，但是如果我在地址栏中输入登录链接，它会注销并将用户带回登录页面。 我不知道该怎么处理。

这是我的背景

import React, {useContext, useEffect, useState} from 'react'
import { auth } from '../firebase-config'

const AuthContext = React.createContext()

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

export function AuthProvider({ children }) {

    const [currentUser, setCurrentUser] = useState()
    const [loading, setLoading] = useState(true)

    function singup(email, password){
        return auth.createUserWithEmailAndPassword(email, password)   
    }

    function login(email, password){
        return auth.signInWithEmailAndPassword(email, password)
    }
    function logout(){
        return auth.signOut()
    }

    function resetPassword(email){
        return auth.sendPasswordResetEmail(email)
    }

    function updateEmail(email){
        return currentUser.updateEmail(email)
    }

    function updatePassword(password){
        return currentUser.updatePassword(password)
    }

    useEffect(() =>{
        const unsubscribe = auth.onAuthStateChanged(user =>{
            setCurrentUser(user)
            setLoading(false)
        })

        return unsubscribe
    }, [])

    const value = {
        currentUser,
        login,
        singup,
        logout,
        resetPassword,
        updateEmail,
        updatePassword
    }

  return (
    <AuthContext.Provider value={value}>
        { !loading && children }
    </AuthContext.Provider>
  )
}

Answer 1

问题

由于您在地址栏中手动输入 URL，因此当您这样做时，它将重新加载页面，从而重新加载您的应用程序。 任何存储在 state 中的东西都会被擦除。 要保持状态，您需要将其持久化到长期存储，即 localStorage。

解决方案

使用 localStorage，您可以从localStorage 初始化currentUser ，并使用useEffect挂钩将currentUser持久化到localStorage。

例子：

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(
    JSON.parse(localStorage.getItem("currentUser"))
  );
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    localStorage.setItem("currentUser", JSON.stringify(currentUser));
  }, [currentUser]);

  ...

  useEffect(() =>{
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    login,
    singup,
    logout,
    resetPassword,
    updateEmail,
    updatePassword
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

Answer 2

当您在地址栏中重新输入链接时，它会删除所有保存的上下文，如果您想要一种简单的方法来保存登录状态，您可以将 currentUser 对象保存在 localStorage 中（这是一种非常基本的方式，不推荐在真实网站），然后当页面加载时，您可以使用 useEffect 从 localStorage 获取该数据并将 currentUser 设置为您保存在 localStorage 中的用户。