React管理后台登录判断

在登录页面里，当用户点击登录的时候我们肯定要调用服务器端的接口 ，判断用户是否登录成功，如果登录成功会把对应的（Token值）存在本地，接着我们会根据 （Token）值来判断用户是否登录

接着我们创建一个文件utils
这里面会封装一些我们常用的方法，比如 auth.js
他的作用是存取用户的一些授权信息的

export function getToken(){
    //会在localStorage里面存放Token ,服务器会给我们一个类似令牌，也会保存下来
    return localStorage.getItem('token')
}
//
export function setToken(token){
   localStorage.setItem('token',token) //把这里传过来的token给保存下来
}
export function  isLogined(){ //是否登录
   if(localStorage.getItem('token')){//做一个判断token是否存在
         return true;// 存在返回true  
   }
   return false;
}

我们所有的管理页面都是走的App.JS,那我们就可以在App.js 里做一个处理，引入utils文件里的auth.js文件

import {isLogined} from './utils/auth'

如果登录过返回一个网页，没有就返回另一个的网页

return ( isLogined()?
   
   <Frame>
          <Switch>
            {adminRoutes.map(route=>{
              return <Route key = {route.path} 
              path = {route.path}
              exact = {route.exact} 
              render = {routeProps =>{
                return <route.component {...routeProps}/>
              }}
              />
            })}
            <Redirect to={adminRoutes[0].path} from ='/admin'/>
            <Redirect to = '/404' />
          </Switch>
     </Frame>:<Redirect to = '/Login'/>
  
  );

在return 里写一个三元运算符 ，如果是的话就返回我们的第一个登录，如果否就重定向就回到Login.js页面
这里就是判断用户是否登录，登录过就继续往后面走，没有的话我们跳转到登录页面，我们访问所有/admin的时候都会做这个处理，
接着看一下效果
登录页面
访问/admin /products 提示要加一个key,在List.js 里面添加 rowKey=‘id’

 <Table  rowKey='id' columns={columns}  dataSource={dataSource}/>

当访问/admin时都会判断是否有token

如果我们在登录的时候，点击登录按钮后，如果验证通过就会调用接口 ，这里我们先省略调用接口
在Login.js 里面引入 setToken 方法

import {setToken} from '../utils/auth';
setToken(values.username);
            props.history.push('/admin');

当我们登录成功之后，也就是直接写Token,跳转到我的管理后台首页
接着看下效果

这就是一个简单的登录判断
要注意我们所有的登录页面的判断都是在App.js里面的，首先判断用户有没有登录