reactjs - 使用离子+反应时的路线守卫
问题描述
我想将未经身份验证的用户重定向到/login
. 我的上下文中有一个名为 的属性loggedIn
,当它为 false 时,我想重定向到HomePage
ie "/"
。
由于路线结构,我只是感到困惑。我到处都看到类似受保护路线的东西。
import React, { useContext, useEffect } from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet, IonSplitPane } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { setupConfig } from "@ionic/react";
import { Plugins, Capacitor } from "@capacitor/core";
import { useHistory } from "react-router-dom";
import Home from "./pages/Home/Home";
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";
/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
import "../src/utils/spacing.css";
/* Theme variables */
import "./theme/variables.css";
/* Components */
import Dashboard from "./pages/Dashboard/Dashboard";
import SideMenu from "./components/SideMenu/SideMenu";
import LoginPage from "./pages/Login/Login";
import SignupPage from "./pages/Signup/Signup";
import Create from "./pages/Create/Create";
import Edit from "./pages/Edit/Edit";
import { AuthContext, AuthProvider } from "./providers/context/AuthContext";
const App: React.FC = () => {
const history = useHistory();
return (
<IonApp>
<AuthProvider>
<IonReactRouter>
<IonSplitPane contentId="main">
<SideMenu />
<IonRouterOutlet id="main">
<Route path="/dashboard/:name" component={Dashboard} exact />
<Route path="/dashboard/Edit/:id" component={Edit} exact />
// if !user navigate to login component
<Route path="/create" component={Create} exact />
<Route path="/signup" component={SignupPage} exact />
<Route path="/" component={Home} exact />
<Redirect from="/dashboard" to="/dashboard/Home" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</AuthProvider>
</IonApp>
);
};
export default App;
解决方案
可能对任何人都有用:通过使用 Private Route 和 public Route 技巧来解决它
我创建了一个名为PrivateRoute.tsx
并添加了以下内容的组件:
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { EnrolleeContext } from "../providers/context/EnrolleeContext";
const PrivateRoute = ({ component: Component, ...rest }: any) => {
const { loggedIn } = useContext(EnrolleeContext);
return (
// Show the component only when the user is logged in
// Otherwise, redirect the user to /signin page
<Route
{...rest}
render={(props) =>
loggedIn ? <Component {...props} /> : <Redirect to="/" />
}
/>
);
};
export default PrivateRoute;
还创建了一个公共路由,添加限制为restrict Components
if restricted == true
,这意味着该路由是私有的,如果为 false,否则。
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { EnrolleeContext } from "../providers/context/EnrolleeContext";
const PublicRoute = ({ component: Component, restricted, ...rest }: any) => {
const { loggedIn } = useContext(EnrolleeContext);
return (
// restricted = false meaning public route
// restricted = true meaning restricted route
<Route
{...rest}
render={(props) =>
loggedIn && restricted ? (
<Redirect to="/dashboard/Home" />
) : (
<Component {...props} />
)
}
/>
);
};
export default PublicRoute;
更新App.tsx
<PublicRoute restricted={false} component={Home} path="/" exact />
<PublicRoute
restricted={true}
component={LoginPage}
path="/login"
exact
/>
<PrivateRoute
component={Dashboard}
path="/dashboard/:name"
exact
/>
<PrivateRoute component={Create} path="/create" exact />
<PublicRoute
restricted={false}
component={ForgotPassword}
path="/forgot-password"
exact
/>
其他路由,如forgot password is open to the
public`,而 Create 是 Private,因此由您自行决定。
推荐阅读
- python - Python: Whats the difference between directly importing and using 'from' keyword
- python-3.x - ImportError: cannot import name SignedJwtAssertionCredentials when oauth2client==4.0.0, neither using PyOpenSSL==20.0.1
- wordpress - 提交联系表格 7 后更改登录用户的角色
- jquery - 为什么onclick动作fontawesome后消失
- python - Tensorflow TimeseriesGenerator 参数混淆
- java - 无法将整个输入文件复制到Java中的输出文件
- jquery - Codeigniter Ajax 删除
- sql - Oracle:查找锁定的行返回错误的行 ID
- python - Pydantic 模型 w Fastapi 看不到属性
- linux - 重新加载虚拟机后 systemctl 恶魔不工作(ubuntu,azure)