【发布时间】：2020-05-04 22:03:18
【问题描述】：
此应用程序有登录/注册帐户，以及一个 google oauth 帐户。
我的问题是告诉私有路由不访问身份验证路由，如仪表板/编辑配置文件等。在 googleOauth 注销时。
例如，这个导航栏完全符合我的要求，但是这个逻辑在私有路由组件中不起作用。
这个逻辑
props.isAuthenticated === true || props.googleAccount != ""
因此，如果 isAuthenticated(regular account) 为 true，则显示这些经过身份验证的导航按钮，或者如果 googleAccount 已登录，则显示经过身份验证的导航按钮。我想在私有路由中实现同样的逻辑，但它不保护任何路由。
props.googleAccount 只是一个字符串(googleId)
props.isAuthenticated 是一个布尔值
Router.tsx
const user = props.currentUser.user ? props.currentUser.user : "";
const googleId = props.currentUser && props.currentUser.user ? props.currentUser.user.googleId : null;
console.log("router", user);
console.log("dsdsdsds", props.googleAccount);
return props.hasError ? (
<div>Error</div>
) : (
<Router history={history}>
<AppBar position="static">
<Toolbar>
<Grid justify="space-between" container={true}>
<Typography variant="h6" style={{ color: "#fff" }}>
TypeScript React App
</Typography>
<Grid item={true}>
{props.isAuthenticated === true || props.googleAccount != "" ? (
<Fragment>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/"
>
Home
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
textDecoration: "none",
fontWeight: "500",
}}
to="/dashboard"
>
Dashboard
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
textDecoration: "none",
fontWeight: "500",
}}
to={{
pathname: `/${user.id}/likes`,
}}
>
Your Likes
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/editProfile"
>
Edit Profile
</Link>
</Button>
<Notification
userId={user.id}
id={id}
handleClose={handleClose}
open={open}
anchorEl={anchorEl}
handleNotificationClick={handleNotificationClick}
title={"Notifications"}
/>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to={{
pathname: `/profile/${user.username}`,
}}
>
Profile
</Link>
</Button>
<Button style={{ color: "#fff" }} onClick={props.logOut}>
Logout
</Button>
</Fragment>
) : (
<Fragment>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/"
>
Home
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/register"
>
Sign Up
</Link>
</Button>
<Button>
<Link
style={{
color: "#fff",
fontWeight: "500",
textDecoration: "none",
}}
to="/login"
>
Log In
</Link>
</Button>
</Fragment>
)}
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Switch>
<Route exact={true} path="/" component={Landing} {...props} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/emailConfirmation" component={EmailConfirmation} {...props} />
{/* <Route path='/resendEmailConfirmation'></Route> */}
<Route path="/emailConfirmationSuccess/:userId/:token" component={EmailConfirmationSuccess} {...props} />
<PrivateRoute exact={true} path="/profile/:username" component={Profile} {...props} />
<PrivateRoute exact={true} path="/editProfile" component={EditProfile} {...props} />
<PrivateRoute exact={true} path="/:userId/likes" component={Likes} {...props} />
<PrivateRoute exact={true} path="/dashboard" component={Dashboard} {...props} />
<PrivateRoute path="/post/:id" component={Post} {...props} />
<Route component={NotFound} />
</Switch>
</Router>
);
PrivateRoute.tsx
import React from "react";
import { Redirect, Route } from "react-router-dom";
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (rest.isAuthenticated || rest.googleAccount != null ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)} />
);
export default PrivateRoute;
【问题讨论】：
标签： reactjs typescript