react 会员登录
2018-08-26 17:27:58来源:博客园 阅读 ()
会员登录在我们的好多项目中都有用到,比如在后台管理系统,它的第一步就需要你进行登录,还有在我们常见的京东、淘宝、网易云音乐等一系列的软件上面都需要进行登录。
下面我们直接上代码
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项目
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- 网站接入QQ登录的两种方法 2020-01-07
- 组件切换方式(Vue.js) 2019-08-14
- 前端笔记之React(八)上传&图片裁切 2019-08-14
- 前端笔记之React(七)redux-saga&Dva&路由 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash