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 (
        
          {children}
        
    )
  }

    未登录：layout/login/index.jsx

export default ({ children }) => {
  return children
}

    已登录：layout/logged/index.jsx

  
        
          
        
        
          

            
              {this.props.children}
            
        
      

相信需要表达的意思已经清楚了

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

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

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

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

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