react 会员登录

会员登录在我们的好多项目中都有用到，比如在后台管理系统，它的第一步就需要你进行登录，还有在我们常见的京东、淘宝、网易云音乐等一系列的软件上面都需要进行登录。

下面我们直接上代码

 fetch(url,{
     method: 'post', //使用post方法
     mode: 'cors', //跨域
     headers:{
         'Content-Type': 'application/x-www-form-urlencoded'
     },  //请求头
     body:'cellphone='+this.state.username+'&password='+this.state.password //方式数据
 }).then(res=>res.json())
     .then(json=>{if(json.code === ){
         localStorage['uid']=json.data.uid; //本地存储
         this.props.history.replace("/detail")
     }else {
         console.log(json.data)
     }})

现在我们可以看到，我使用的post方法向服务器端发送数据，当请求成功的时候，我们暂时把它存储在本地，这里也可以结合redux来做，有兴趣的可以参考我的另一篇博客初步了解redux来完成，然后进行跳转，如果请求没有成功我们可以直接返回它失败的原因，

接下来说一下重点，验证它是否登录，我们专门建一个js文件

 import React from 'react';
 import {Route,Redirect} from 'react-router-dom'
 const AuthRoute = ({ component: Component, ...rest }) => (
     <Route {...rest} render={props => (
         localStorage.getItem("uid") ? (//如果本地存储里面有我们就进行跳转，没有就进行重定向返回登录页面
             <Component {...props}/>
         ) : (
             <Redirect to={{
                 pathname: '/news', //重定向的页面
                 state: { from: props.location }
             }}/>
         )
     )}/>
 );
 export {
     AuthRoute
 }

最后我们到主路由页面引入我们的这个验证登录

 import {AuthRoute} from '../assets/common/function'

把Route改成AuthRoute

现在我们的会员登录就完成了。