react-router 5.0 authenticator

react-router 5.0 authenticator

When the route we use the react-router control page, some pages need to be logged in to visit, and some do not need to log in to access, and some pages, it is to restrict access based on user permissions.

If traditional multi-page, only the back-end authentication can be, and no authority to direct the backend redirect.

However, the single-page, the routing using window.history.statepush In this case, the route change is not sending a page request to the server. So it is necessary front-end for authentication .

A reference vue way

Vue in which routing is configured to json format, so it is convenient to use routing guards to control access. So the Internet has a way, is to use the react-router-config to mimic vue routing authentication.

Its source code is not complicated. Details may be used in the reference   . By later research found that this does not seem to meet my request, because nested sub-route seems there is no way to resolve once, that is, nested sub routing of each page, to separate configuration json. And can not seem to inside the parent page, the page's sub-components pass props.

 

Second, write a similar Route components, and authentication in its inside

RouteGuard.tsx as a new source.

React from AS * Import 'REACT'; 
Import the Route {,} from the Redirect 'REACT-Router-DOM'; 

// interface GuardProps { 
// path: String; 
// Component: React.Component; 
// Permissions: the any [? ]; 
// Exact: Boolean | undefined;? 
// strict: Boolean | undefined;? 
// otherProps:? Object; 
//} 

// user information can be injected by the mobx 
class Guard the extends React.Component <the any, the any> { 
    constructor (the props: the any) { 
        Super (the props); 
        // get the user information is assumed herein from the inside mobx 
        const = {UserInfo 
            level: // assumed. 1 is a general user level 
        }; 
        // if the user information does not exist, it is necessary to Login  
        let auth = true;
        if (! userinfo) {
            auth = false;
        } else if (this.props.permissions) {
            // 如果存在，说明是需要区别等级鉴权的
            const permissions = this.props.permissions;
            if (permissions.indexOf(userinfo.level) === -1) {
                auth = false;
            }
        }
        this.state = {
            auth
        };
    }
    public render() {
        const ComponentPage = this.props.component;
        return (
            <Route
                path={this.props.path}
                exact={this.props.exact || false}
                strict={this.props.strict || false}
                render={props => {
                    return (
                        this.state.auth ? (
                            <ComponentPage {...props} {...this.props.otherProps} />
                        ) : (
                                <Redirect to={{
                                    pathname: '/login',
                                    state: { from: props.location }
                                }} />
                            )

                    )
                }
                }
            />
        );
    }
}
export default Guard;

　　

Rute use and similar, as long as the required authentication page, use RouteGuard  components on it, if not authenticated, you can still continue to use the native route components:

import * as React from 'react';
import { Switch } from 'react-router-dom';
import RouteGuard from "src/RouteGuard";
import Index from "src/pages/main/Index/Index";


class Home extends React.Component<any>{
  public componentDidMount(){
    console.log(this.props);
  }
  public render() {
    return (
      <div className="_Home">
         <div className="section base-container">
          <Switch>
           <RouteGuard path="" exact={true} component={Index} />
          </Switch>
         </div>
      </div>
    );
  }
}

export default Home;

　　

 

Summary: can continue to add some judgment, for example, the difference between the mobile terminal and the PC side, to render different components