React搭建后台管理系统总结

初始：通过 create-react-app 搭建框架

主要三方库：react-router-dom redux react-redux

UI库：antd

组件分类：分为普通pages（包含login）和 layout(header,sider等)，除Login页、404以外，其他页面均嵌套在MyLayout母板中渲染，即作为MyLout组件的子组件

路由以及权限结构：

·PageRouters.js（无权限路由）：

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>
)
复制代码

·AppRouters.js (权限路由)：

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>
)
复制代码

第一重校验即登陆校验在MyLayout组件中进行，即通过校验localStorage中的token来判断用户是否应处于登陆状态，若无则跳回Login页面，

接着再将token置于请求头中请求用户信息，以此来渲染Sider中的列表以及Header中显示的用户名。

第二种校验即权限校验，通过抽出<AuthorizedRoute>来作为权限判断的中间层，在中间层中通过redux中的用户menus来判断是否有权限进入此页面。无权限则渲染403页面