react router 路由守卫_react-router怎么做路由守卫?
import React from "react";import {BrowserRouter as Router,Route,Link,Redirect,withRouter} from "react-router-dom";const AuthExample = () => (Public PageProtected Page);const fakeAuth = {isAuthentic
import React from "react";
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from "react-router-dom";
const AuthExample = () => (
-
Public Page
-
Protected Page
);
const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
this.isAuthenticated = true;
setTimeout(cb, 100); // fake async
},
signout(cb) {
this.isAuthenticated = false;
setTimeout(cb, 100);
}
};
const AuthButton = withRouter(
({ history }) =>
fakeAuth.isAuthenticated ? (
Welcome!{" "}
onClick={() => {
fakeAuth.signout(() => history.push("/"));
}}
>
Sign out
) : (
You are not logged in.
)
);
const PrivateRoute = ({ component: Component, ...rest }) => (
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
) : (
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
const Public = () =>
Public
;const Protected = () =>
Protected
;class Login extends React.Component {
state = {
redirectToReferrer: false
};
login = () => {
fakeAuth.authenticate(() => {
this.setState({ redirectToReferrer: true });
});
};
render() {
const { from } = this.props.location.state || { from: { pathname: "/" } };
const { redirectToReferrer } = this.state;
if (redirectToReferrer) {
return ;
}
return (
You must log in to view the page at {from.pathname}
Log in
);
}
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)