react 会员登录

2018-08-26 17:27:58来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

下面我们直接上代码

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

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

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

 1 import React from 'react';
 2 import {Route,Redirect} from 'react-router-dom'
 3 const AuthRoute = ({ component: Component, ...rest }) => (
 4     <Route {...rest} render={props => (
 5         localStorage.getItem("uid") ? (//如果本地存储里面有我们就进行跳转,没有就进行重定向返回登录页面
 6             <Component {...props}/>
 7         ) : (
 8             <Redirect to={{
 9                 pathname: '/news', //重定向的页面
10                 state: { from: props.location }
11             }}/>
12         )
13     )}/>
14 );
15 export {
16     AuthRoute
17 }

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

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

Route改成AuthRoute

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用pm2自动化部署node项目

下一篇:js权威指南学习笔记(二)表达式与运算符