react和c 后台_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 () => (

} />

)

复制代码

·AppRouters.js (权限路由)：

export default () => (

component={TestPage1} />

component={TestPage2} />

component={TestPage3} />

)

复制代码

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

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

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