从零开始到完整的React后台管理项目开发路程(第四节)

一、用户登陆成功后如何保存用户信息

如何维持登陆、免登陆

1. 登陆后，刷新依然是登陆状态
2. 登陆后，关闭浏览器打开浏览器依然可以是登陆状态
3. 登陆后，访问登陆路径自动跳转到首页

原生的localStroge兼容性不够，所以引入store库来存

 src/utils/storageUtil.js

import store from 'store'
const USER_KEY = 'user_key'
export default {
    /**
     * 保存user
     */
    saveUSer(user) {
        // localStorage.setItem(USER_KEY,JSON.stringify(user)) // 原生的localStroge兼容性不够，所以引入store库来存
        store.set(USER_KEY,user)
    },
    getUSer() {
    //    return JSON.parse(localStorage.getItem(USER_KEY) || '{}')// 无值返回null
          return store.get(USER_KEY) || {}
    },
    removeUser() {
        // localStorage.removeItem(USER_KEY)
        store.remove(USER_KEY)
    }
}

二、登陆成功后的页面怎么设计

分为上、左、右

这里有个关于路由导航的渲染方法，我一共尝试了两种方法写，可以看看具体讲解

/* 管理路由组件 */
 class Admin extends React.Component {
    render() {
       const user = this.props.user
        if (!user._id || !user) { // 当前没有登录
            // 自动跳转到登录（在render（）中）
            return <Redirect to='/login' />
        }
        return (
            <Layout className="main">
                <Sider className="left_nav">
                    <LeftNav />
                </Sider>
                <Layout>
                    <Header className="top_hd">
                        <TopHeader></TopHeader>
                    </Header>
                    <Content className="main_bd">
                        {/* 配置路由 地址栏输入后去下面寻找匹配*/}
                        <Switch>
                            <Redirect exact={true} from="/" to='/home' /> 
                            {/* exact代表精准匹配 */}
                            <Route path='/home' component={Home} />
                            <Route path='/category' component={Category} />
                            <Route path='/charts/bar' component={Bar} />
                            <Route path='/charts/line' component={Line} />
                            <Route path='/charts/pie' component={Pie} />
                            <Route path='/role' component={Role} />
                            <Route path='/user' component={User} />
                            <Route path='/product' component={Product} />
                            {/* 默认页面 */}
                            <Route component={NotFound} />
                        </Switch>
                        
                    </Content>
                    <Footer className="footer">由 pretty 开发</Footer>
                </Layout>
            </Layout>
        )
    }
}
export default connect(
    state => ({user:state.user}),{}
)(Admin) 

样式的详细style代码可以在项目里查看

三、左侧部分路由设计

参考的是Ant design的导航路由

四、右侧顶部栏设计

其中有个天气模块，需要先去申请appkey 。