umi layout的使用方法

react umi当中layout布局切换：登录页、登录之后的布局

1.切换layout布局

2.记录从哪个页面跳转到登录页面的，登录之后返回（不使用localStorage）

3.Cookie等信息记录登录状态（登录失效，跳到登录页面）

核心观点是：将是否登录的状态划分为2种布局

                  布局1：非登录状态，直接进入登录页面

                  布局2：已登录状态，拥有sider、header、main区域划分的布局

下面以react项目为例：

layouts/index.jsx

render() {
const { children, location, user } = this.props;
let Container = ((getCookieToken() || user.token) && location.pathname.indexOf(’/login’) === -1 ) ? Logged : Login;

return (
    <Fragment>
      <Container>{children}</Container>
    </Fragment>
)

}
未登录：layout/login/index.jsx

export default ({ children }) => {
return children
}
已登录：layout/logged/index.jsx

首先布局的核心就是那层顶级的组件，其他的子组件直接进入就是了

需要到跳转到登录页面就：切换布局组件，然后正常跳转路由就是了，是不是很简单。。。。

然后通过地址，记录是从那个url跳转到的登录页面如：localhost:8080/login?form=home

做一个跳转前的钩子，记录到地址中，

然后登录之后优先跳转到这个地址中去，这样是不是体验好一点呢