核心代码(如下),其实理解了核心思想很简单,刚开始被官方示例一大堆代码给蒙蔽了,哈哈。
const PrivateRoute = ({component:Component,...rest}) => {
return (
<Route
{...rest}
render={props =>
window.localStorage.getItem('login') === '1' ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/logins",
state: { from: props.location }
}}
/>
)
}
/>
)
}
<PrivateRoute path="/counter" component={Counter}></PrivateRoute>
官方示例
import React, { Component } from "react";
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from "react-router-dom";
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time
function AuthExample() {
return (
<Router>
<div>
<AuthButton />
<ul>
<li>
<Link to="/public">Public Page</Link>
</li>
<li>
<Link to="/protected">Protected Page</Link>
</li>
</ul>
<Route path="/public" component={Public} />
<Route path="/login" component={Login} />
<PrivateRoute path="/protected" component={Protected} />
</div>
</Router>
);
}
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 ? (
<p>
Welcome!{" "}
<button
onClick={() => {
fakeAuth.signout(() => history.push("/"));
}}
>
Sign out
</button>
</p>
) : (
<p>You are not logged in.</p>
)
);
function PrivateRoute({ component:Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
function Public() {
return <h3>Public</h3>;
}
function Protected() {
return <h3>Protected</h3>;
}
class Login extends Component {
state = { redirectToReferrer: false };
login = () => {
fakeAuth.authenticate(() => {
this.setState({ redirectToReferrer: true });
});
};
render() {
let { from } = this.props.location.state || { from: { pathname: "/" } };
let { redirectToReferrer } = this.state;
if (redirectToReferrer) return <Redirect to={from} />;
return (
<div>
<p>You must log in to view the page at {from.pathname}</p>
<button onClick={this.login}>Log in</button>
</div>
);
}
}
export default AuthExample;
方法2
import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Switch, Route, Redirect} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory();
// 按路由拆分代码
import Loadable from 'react-loadable';
const loadingComponent = ({ isLoading, error }) => {
// Handle the loading state
if (isLoading) {
return <div>Loading...</div>;
}
// Handle the error state
else if (error) {
return <div>Sorry, there was a problem loading the page.</div>;
}
else {
return null;
}
};
const Index = Loadable({
loader: () => import('./Index'),
loading: loadingComponent
});
const Home= Loadable({
loader: () => import('./Home'),
loading: loadingComponent
});
const Login= Loadable({
loader: () => import('./Login'),
loading: loadingComponent
});
/**
* (路由根目录组件,显示当前符合条件的组件)
*
* @class Roots
* @extends {Component}
*/
class Roots extends Component {
render() {
return (
<div>{this.props.children}</div>
);
}
}
// 登录验证
function requireAuth(Layout, props) {
if (true) { // 未登录
return <Redirect to="/login" />;
} else {
return <Layout {...props} />
}
}
let Router = process.env.NODE_ENV !== 'production' ? BrowserRouter : HashRouter;
const RouteConfig = (
<Router history={history}>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/home" component={props => requireAuth(Home, props)} />
<Route path="/login" component={Login} />
<Redirect from='' to="/" />
</Switch>
</Router>
);
export default RouteConfig;
摘自:
https://reacttraining.com/react-router/web/example/auth-workflow
https://segmentfault.com/a/1190000012545692
核心代码(如下),其实理解了核心思想很简单,刚开始被官方示例一大堆代码给蒙蔽了,哈哈。
const PrivateRoute = ({component:Component,...rest}) => {
return (
<Route
{...rest}
render={props =>
window.localStorage.getItem('login') === '1' ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/logins",
state: { from: props.location }
}}
/>
)
}
/>
)
}
<PrivateRoute path="/counter" component={Counter}></PrivateRoute>
官方示例
import React, { Component } from "react";
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from "react-router-dom";
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time
function AuthExample() {
return (
<Router>
<div>
<AuthButton />
<ul>
<li>
<Link to="/public">Public Page</Link>
</li>
<li>
<Link to="/protected">Protected Page</Link>
</li>
</ul>
<Route path="/public" component={Public} />
<Route path="/login" component={Login} />
<PrivateRoute path="/protected" component={Protected} />
</div>
</Router>
);
}
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 ? (
<p>
Welcome!{" "}
<button
onClick={() => {
fakeAuth.signout(() => history.push("/"));
}}
>
Sign out
</button>
</p>
) : (
<p>You are not logged in.</p>
)
);
function PrivateRoute({ component:Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
function Public() {
return <h3>Public</h3>;
}
function Protected() {
return <h3>Protected</h3>;
}
class Login extends Component {
state = { redirectToReferrer: false };
login = () => {
fakeAuth.authenticate(() => {
this.setState({ redirectToReferrer: true });
});
};
render() {
let { from } = this.props.location.state || { from: { pathname: "/" } };
let { redirectToReferrer } = this.state;
if (redirectToReferrer) return <Redirect to={from} />;
return (
<div>
<p>You must log in to view the page at {from.pathname}</p>
<button onClick={this.login}>Log in</button>
</div>
);
}
}
export default AuthExample;
方法2
import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Switch, Route, Redirect} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory();
// 按路由拆分代码
import Loadable from 'react-loadable';
const loadingComponent = ({ isLoading, error }) => {
// Handle the loading state
if (isLoading) {
return <div>Loading...</div>;
}
// Handle the error state
else if (error) {
return <div>Sorry, there was a problem loading the page.</div>;
}
else {
return null;
}
};
const Index = Loadable({
loader: () => import('./Index'),
loading: loadingComponent
});
const Home= Loadable({
loader: () => import('./Home'),
loading: loadingComponent
});
const Login= Loadable({
loader: () => import('./Login'),
loading: loadingComponent
});
/**
* (路由根目录组件,显示当前符合条件的组件)
*
* @class Roots
* @extends {Component}
*/
class Roots extends Component {
render() {
return (
<div>{this.props.children}</div>
);
}
}
// 登录验证
function requireAuth(Layout, props) {
if (true) { // 未登录
return <Redirect to="/login" />;
} else {
return <Layout {...props} />
}
}
let Router = process.env.NODE_ENV !== 'production' ? BrowserRouter : HashRouter;
const RouteConfig = (
<Router history={history}>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/home" component={props => requireAuth(Home, props)} />
<Route path="/login" component={Login} />
<Redirect from='' to="/" />
</Switch>
</Router>
);
export default RouteConfig;
摘自:
https://reacttraining.com/react-router/web/example/auth-workflow
https://segmentfault.com/a/1190000012545692