react招聘项目——使用cookie实现项目自动登录功能

cookie实现自动登录功能

最近在项目中使用了cookie实现自动登录的功能，下面我将使用项目中的例子来对cookie进行简单的分析。

功能需求是：在用户访问网址的时候，使用cookie对用户的操作进行处理，使用户的访问得到响应。

项目背景条件：使用node+express编写的后台，在后台处理登录请求的时候，会将要保存在浏览器端cookie中的数据通过响应发送过去。

服务器端操作：

//设置登录后台路由
router.post('/login',function(req,res){const {username,password}=req.body;// const username=req.body.user.username;// const password=req.body.user.password;console.log(username,password,req.body)//根据密码和用户名查询数据,filter是一个过滤器用来过滤密码UserModel.findOne({username,password:md5(password)},filter,function(err,doc){if(doc){//正确，返回结果//生成一个cooKie，并提交给浏览器保存console.log('成功请求')res.cookie('userid',doc._id,{maxAge:1000*60*24*7});res.send({code:0,data:doc})//不能将密码发送给浏览器}else{//失败console.log('失败请求')res.send({code:1,msg:'用户名或者密码错误！'})}})
})

在这里通过res.cookie将数据发送过去，这里发送的数据是userid，{maxAge:10006024*7}这个表示的是数据在浏览器中存在的时间，这里是一周。（就这个项目而言）为什么后台只发送id属性值发送过去了，因为id可以明确的标明一个数据库中的字段，通过id属性我们可以通过再次发送请求，获得字段数据（数据库使用的是MongoDB）。

客户端操作：

现实使用情况，例如：当我们请求过一次网址（登录过这个项目），然后了，我们×了这个网页，这是当我们再次请求网址，我们如何处理用户输入的网址请求了（网址不确定，难道是让用户再次进入登录界面重新的登录过吗？显然这种方式不够友好），*所以我们如何实现用户自动登录进之前关闭项目页面的那个具体界面呢？或者登录到用户指定的具体页面呢？

1）具体操作：先来简单分析一下需求功能的逻辑（我们的目的是拿到数据然后渲染界面给用户），首先如果是用户登录过然后×掉了网页，然后在取请求网址，没有关闭浏览器，这时浏览器通过上一次的请求的响应数据保存了cookie中的数据，所以用户的id属性值我们是可以得到的，所以可以通过渲染页面是的生命周期函数再次发送请求获得数据，然后渲染界面。还有一种情况就是，由于我们之前登陆项目所以redux中的state状态机保存着当时的数据（在数据没有消失的情况下），所以我们可以直接不用发送请求直接渲染界面给用户。

总结一下可能情况：
1：浏览器cookie中没有id值，说明用户都没有登录过，所以跳转到登录界面，进行登录操作；
2：浏览器cookie中有id值，redux中没有数据了，所以得发送请求；
3：浏览器cookie中有id值，redux中有数据，所以直接拿出状态机中的数据直接进行渲染界面即可；

代码：

好的下面进行项目代码的编写，首先在react项目中引入js-cookie这个模块，终端输入命令 npm install --save js-cookie 下载模块对cookie进行操作。

生命周期中发送请求，render函数中不可以发送ajax请求

 componentDidMount(){//生命周期函数，由于render函数中不可以发送ajax请求，所以得在生命周期函数中来发送请求//cookie中有userid//redux中的user是一个空对象const userid = Cookies.get('userid');//得到浏览器cookie中的IDconst {user}=this.props;if(userid && !user._id){//发送请求的条件是，cookie中的userid有值但是redux中的user状态对象中没有id属性this.props.getUser()//发送请求}}

//实现客户端只有登录//客户端请求页面路径的时候，浏览器就可以获得你的请求路径const pathname=this.props.location.pathname;//判断客户是否登录过（使用Cookie得到id）const userid=Cookies.get('userid');if(!userid){//如果没有值，直接跳转到登录界面return <Redirect to='/login'/>}//cookie中有userid//redux中的user是否有数据，如果有的话就不需要在发送请求const {user}=this.props;if(!user._id){//没有值，这里不做处理，交给生命周期函数再去发送函数return null}else{//如果请求的是根路径，通过路径拼接函数，然后在跳转到对应的界面if(pathname==='/'){const path=getRedirectPath(user.type,user.header);return <Redirect to={path}/>}}

请求路径拼接函数

//封装一些工具函数（公用的一些方法）
export function getRedirectPath(type,header){let path=''path += type==='laoban'?'/laoban':'/dashen';if(!header){path +='info'}return path;
}

通过以上代码，借助cookie就实现用户自动登录的需求。

总结一下自己在编写这个功能的时候的感受和想法：
我自己第一次了解这个cookie实现自动登录也没听懂，然后听了两遍才基本明白了其中的逻辑，第一次听了难住我的主要是redux中的数据存在与否，还有一点就是后台的数据的获得（原来通过id属性就可以得到整个用户的所有在项目中的信息，所以在设计MongoDB集合的时候还是蛮不错的），还有一点感受就是，编写代码得认真，有时候写错一个字符或者多打了一个括号，这都会使项目失败，而且有时候这一些错误，编译器他还不报错（服了），最后测试项目真的蛮重要的，功能遇到的问题，我都花了好久才测试出来在哪里出错了（太菜了），哈哈。所以编写代码得细致，写了一部分就运行一下看看效果。对于项目逻辑这一块，我现在感觉只要自己真的用心分析，一般的这种逻辑都不怎么难。所以，做一个用心，细致的程序员。

react招聘项目——使用cookie实现项目自动登录功能相关推荐

HTML用cookie实现自动登录,用cookie实现websocket自动登录，session状态保留。
原标题:用cookie实现websocket自动登录,session状态保留. 会话状态的保留,即登录状态保持,是很常见.很常用的功能. 本文将介绍,在NodeJS开发中,如何实现websocket连 ...
python调用qq互联_Django项目中实现使用qq第三方登录功能
使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name=' ...
python-web自动化测试-验证码的处理（通过记录cookie，实现自动登录）
验证码是一种随机生成的信息(图片.数字.字母.汉字.算术题)等为了防止恶意的请求行为,增加应用的安全性. 验证码的判定优先级高于账号和密码. 一.验证码的处理方法 (1)取消验证码----->找 ...
java 自动登录功能_jsp实现用户自动登录功能
理解并掌握cookie的作用以及利用cookie实现用户的自动登录功能,实现下图效果当服务器判断出该用户是首次登录的时候,会自动跳转到登录界面等待用户登录,并填入相关信息.通过设置cookie的有效 ...
一篇文章带你搞定 SpringBoot 配合 SpringSecurity 实现自动登录功能
自动登录是我们在软件开发时一个非常常见的功能,例如我们登录 QQ 邮箱: 很多网站我们在登录的时候都会看到类似的选项,毕竟总让用户输入用户名密码是一件很麻烦的事. 自动登录功能就是,用户在登录成功后, ...
网站1周内自动登录功能实现
在很多比较大型的网址例如:CSDN,大家在登录时候会有一个[下次自动登录]的功能,该功能与我们的1周内自动登录功能基本类似.所谓的自动登录无非就是,绕过登录界面,自动登录到系统主页. 自动登录的原理 ...
业务系统实现记住密码和自动登录功能
业务系统实现记住密码和自动登录功能公司的业务系统本来是受域控的,用户不需要登录可以直接访问系统.当然,虽然不用人工登录,系统本身会读取电脑的用户名为登录标识,对系统操作权限和记录也是以电脑名.近段时 ...
python 自动登录网站_python实现网站用户名密码自动登录功能
一.概述公司需要通过网页用户认证登录实现上网,网络设备判断当前帐号12小时没有没上网将会自动断开帐号上网,每天早上上班第一件事就是打开用户认证网页输入. 用户名与密码,有时候要家里通过teamvie ...
在 Windows 中启用自动登录功能
在 Windows 中启用自动登录功能本文介绍了如何通过将密码和其他相关信息存储在注册表数据库中以配置 Windows 自动执行登录过程. 通过使用此功能,其他用户可以启动您的计算机并使用您建立的帐 ...

react招聘项目——使用cookie实现项目自动登录功能

cookie实现自动登录功能

react招聘项目——使用cookie实现项目自动登录功能相关推荐

最新文章

热门文章