当前位置: 首页 > 工具软件 > Web layout > 使用案例 >

umi layout的使用方法

贲绪
2023-12-01

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

1.切换layout布局

2.记录从哪个页面跳转到登录页面的,登录之后返回(不使用localStorage)

3.Cookie等信息记录登录状态(登录失效,跳到登录页面)

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

                  布局1:非登录状态,直接进入登录页面

                  布局2:已登录状态,拥有sider、headermain区域划分的布局

下面以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

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

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

 类似资料: