Question

此应用程序具有登录/注册帐户和google oauth帐户。

我的问题是告诉私有路由无法访问，如仪表板/编辑个人资料等身份验证路由。退出googleOauth 。

例如，此导航栏完全可以执行我想要的操作，但是此逻辑不适用于私有路由组件。

此逻辑

props.isAuthenticated === true || props.googleAccount != ""

因此，如果isAuthenticated（常规帐户）为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;

Answer 1

可能与这种情况有关

handlebars

即使rest.googleAccount是“”（空字符串），此条件也将返回true

React路由器私有路由正在访问不应访问的路由

1 个答案: