反应如何设置只有在有人登录时才能访问的私有路由？

Question

我正在尝试使用 react-google-login SSO 身份验证创建一个网站，并且我想创建一个私有路由，如果没有用户登录，则没有人可以访问这些路由，甚至查看侧边栏组件。 即使他们尝试通过 url 访问路由，也会始终被重定向到登录页面。

这是我的 app.js

  function App() {
  const [value,setValue] = useState()
  const [loggedIn, setLoggedIn] = useState()

  
  return (
    <>
    <Column style={{ width: "100%" }}>
      <Row horizontal="start" style={{ backgroundColor: "#0C5494" }}>
        <a href="/">
        <img alt="logo" className="photo" src={logo}/>
        </a> 
        </Row>
      <BrowserRouter>
      <Row >
      <Column
            flexGrow={1}
          >
        <PrivateRoute>
        <Route path="/" element={<Sidebar/>}></Route>
        </PrivateRoute>
        </Column>
        <Column
            vertical="start"
            flexGrow={100}
           // style={{ backgroundColor: "pink"}}
          >
          <div className="mainContent">
          <AuthContext.Provider value={{loggedIn,setLoggedIn}}>
          <TableCountContext.Provider value={{value,setValue}}>
          <PrivateRoute>
          <Route exact path="/" element={<RealHome/>}></Route>
          <Route exact path="/search" element={<Home/>}></Route>
          
          <Route path="/login" element={<Login/>}></Route>
     
          <Route path="/FAQ" element={<Faq/>}></Route>
         
          <Route path="/Search-sec" element={<SearchSec/>}></Route>
          </PrivateRoute>
          </TableCountContext.Provider>
          </AuthContext.Provider>
          </div>
          
          </Column>
        </Row>
        
      </BrowserRouter>
      </Column>
    </>
  )
}

export default App

这是我的谷歌登录按钮：

 export default function GoogleLoginButton() {
    const clientId = "myGoogleID.apps.googleusercontent.com"
    const [showLoginButton, setShowLoginButton] = useState(true)
    const [showLogoutButton, setShowLogoutButton] = useState(false)
    const {loggedIn,setLoggedIn} = useContext(AuthContext)
    let navigate = useNavigate()
    const onLoginSuccess = (res) =>{
        console.log("Login Success:", res.profileObj);
        setShowLoginButton(false)
        setShowLogoutButton(true)
        setLoggedIn(localStorage.getItem('isLoggedIn'))
        localStorage.setItem('isLoggedIn', true);
        console.log(localStorage.getItem('isLoggedIn'))
        console.log(loggedIn)
        navigate(`/`)
    }
    const onLoginFailure = (res)=>{
        console.log("Login Failed:", res)
    }

    const onSignoutSuccess = () =>{
        alert("You have been signed out successfully.")
        setShowLoginButton(true)
        setShowLogoutButton(false)
        setLoggedIn(localStorage.getItem('isLoggedIn'))
        localStorage.setItem('isLoggedIn', false);
        console.log(localStorage.getItem('isLoggedIn'))
        console.log(loggedIn)
    }
  
    
    return (
        <div>
            {showLoginButton ?
            <GoogleLogin
                clientId={clientId}
                buttonText="Login"
                onSuccess={onLoginSuccess}
                onFailure={onLoginFailure}
                cookiePolicy={"single_host_origin"}
                isSignedIn={true}
            /> : null }
            {showLogoutButton ?
            <GoogleLogout
                clientId={clientId}
                buttonText="Sign Out"
                onLogoutSuccess={onSignoutSuccess}
            /> : null}
            
        </div>
    )
}

这是我的 PrivateRoute.js

import React, {useContext} from "react"
import {Navigate,Route,Routes} from "react-router-dom"
import { AuthContext } from "./Contexts"

export default function PrivateRoute({ component: Component, ...rest }) {
  const { loggedIn } = useContext(AuthContext)

  return (
    <Routes>
    <Route
      {...rest}
      render={props => {
        return loggedIn ? <Component {...props} /> : <Navigate to="/login" />
      }}
    ></Route>
    </Routes>
  )
}

这是我的 Contexts.js

import { createContext } from "react";

export const TableCountContext = createContext(null)
export const AuthContext = createContext(false)

Answer 1

我使用 redux 进行登录，在这种情况下，您可以编写 react-router-component 来检查用户是否已登录

const ProtectedRoute = ({ component: Component, ...props }) => {
  const { isLoggedIn } = props;
  return (
    <Route render={(props) => (
      !isLoggedIn ? <Component {...props} /> : <Redirect to={{/loginPage}}>/>
    )} {...props} />
  );
};

const mapStateToProps = (state) => ({
  isLoggedIn: state.user.isLoggedIn
})

export default connect(mapStateToProps)(ProtectedRoute)

Answer 2

以下答案适用于react-router版本 6。

根据您是否登录有条件地添加路由，并根据您的需要添加一个或多个重定向：

<Routes>
    <Route path={"/"} element={ <StartPage/> }/>
    <Route path={"/example"} element={ <ExamplePage/> }/>
    <Route path={"/otherpage"} element={ <AnotherPage/> }/>
    {
        isLoggedIn ?
            [ 
                // add as many as you'd like here
                <Route path={"/loggedinpage"} element={ <LoggedInPage/> }/>
            ]
            :
            null
    }
    // take care of redirects for all paths that doesn't match the defined
    <Route path={"*"} element={ <Navigate replace to={ "/" }/> }/>
</Routes>

当没有为登录用户定义路径时，这些路径将由 catch-all 匹配，用户将被重定向到/而当这些路径存在时（例如用户已登录），相关路径将是匹配并显示相应的内容。

提醒一句：请注意，如果您计划从后端提供自定义内容，您需要有一些安全机制来了解用户是否真的登录，例如，不只是相信前端说“我是以这个和这个用户的身份登录”。 你可能已经知道了，但只是说清楚。