Initial: Create the framework using create-react-app

React-router-dom redux redux react-redux

The UI library: antd

Component classification: divided into ordinary pages (including login) and layout(header, SIDER, etc.), except login page, 404, other pages are nested in the MyLayout motherboard rendering, that is, as a child component of MyLout component

Routing and permission structure:

· Pagerouters.js (no permission routing) :

export default () => (
<Router>
<Switch>
<Route exact path="/" render={() => <Redirect to="/app/home" push />} />
<Route exact path="/login" component={Login} />
<Route path="/app" component={MyLayout} />
<Route component={Page404} />
</Switch>
</Router>
)
Copy the code

· Approuters.js (Permission routing) :

export default () => (
<Switch>
<Route exact path="/app/home" component={Home} />
<AuthorizedRoute exact path="/app/testpage"
component={TestPage1} />
<AuthorizedRoute exact path="/app/testpage"
component={TestPage2} />
<AuthorizedRoute exact path="/app/testpage"
component={TestPage3} />
<Route component={Page404} />
</Switch>
)
Copy the code

The first re-check is Login check in MyLayout component, that is, check the token in localStorage to determine whether the user should be in Login state, if not, jump back to the Login page.

The token is then placed in the request Header to request user information, rendering the Sider list and user names displayed in the Header.

The second check is the permission check. <AuthorizedRoute> is taken out as the middle layer for permission judgment. In the middle layer, the user menus in Redux determines whether they have permission to enter the page. Render 403 page without permission