react初学(四)登录页面以及管理端首页(基础逻辑操作)

参考上篇文章，继续完善管理平台，上篇文章我们已经用react结合antd简单的写出了登录页面，接下来我们要做的就是登录页面跳转到首页，判断如果有登录记录，在可以访问首页，以及首页布局等

在util文件夹中创建文件，用来判断是否登录

export function getToken(){
    return sessionStorage.getItem('token')
}

export function setToken(token){
    return sessionStorage.setItem('token',token)
}

export function clearToken(){
    return sessionStorage.removeItem('token')
}
export function isLogined(){
    if(sessionStorage.getItem('token')){
        return true;
    }
    return false;
}

根据如下结构在component中创建文件

index.js文件中内容

import React from 'react'
import { Layout, Menu,Dropdown,message,Avatar} from 'antd';
import {DownOutlined} from '@ant-design/icons'
import './index.css'
import { withRouter } from  'react-router-dom' //高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中
import { adminRoutes } from '../../routes/index'
import { clearToken } from '../../utils/auth' //清空session
const { Header, Content, Sider } = Layout;
const routes = adminRoutes.filter(route => route.isShow) //isShow为true的路由显示在左侧，false一般就是左侧没有入口的路由,在页面中的跳转的某个路由
const index = (props) => {
    //关于Menu等的点击事件都是参考antd的API
    //下面使用的组件其中属性方法请参考antd中对应的API
    const menuList = (
        {
          if(p.key === "logOut"){
            props.history.push('/login')
            clearToken()
          }else{
            message.info(p.key)
          }
        }}>
          通知中心
          设置
          退出
        
      )
    const onChangeItem = function(item){
        props.history.push(item.key)
    }
    return (
        
            

            

                管理平台
            
            
                

                U 
                超级管理员
                
                
            
            
            
            
                
                {routes.map(route => {
                    return (
                        {route.title}
                    )
                })}
                
            
            
                
                {props.children} //子路由显示的位置
                
            
            
        
    )
}

export default withRouter(index)

 index.css文件中内容

.logo{
    color:white;
    font-size:30px;
}
.header{
    display:flex;
    justify-content: space-between;
}
.personalCenter{
    color:white;
    cursor: pointer;
}

 App.js文件中内容

import React from 'react';
import {Switch,Route,Redirect} from 'react-router-dom'
import './App.css';
import {adminRoutes} from './routes'
import Frame from './components/Frame/index'
import {isLogined} from './utils/auth'
function App() {
  //用三目判断用户是否登录,如果没有登录,就重定向到login
  return (isLogined()?
    
      
        {
          adminRoutes.map(route=>{
            return {
                  return  
                }
            }/>
          })   
        }
        
        
      
    : 
  );
}

export default App;

到此为止，我们就基本实现了管理平台的样式和基础逻辑