当前位置: 首页 > 后端技术 > Node.js

基于angular2对用户登录和信息持久化的一些理解(二)

时间:2023-04-04 00:01:30 Node.js

(接上一篇)上面我已经定下了目标和计划,下面简单实现一下后端接口和前端调用。(由于精力有限,这里不着重介绍整个过程是如何实现的,只描述自己在实现过程中会遇到的一些问题和解决方法)Nodejs实现简单的后台服务server.jsvarexpress=require('express');varapp=express();varbodyParse=require('body-parser')varcookieParser=require('cookie-parser');varsession=require('express-session');app.use(cookieParser());应用程序。use(bodyParse.urlencoded({extended:false}));//这里不关注如何从前端返回用户密码,以及如何验证用户名和密码的正确性;//这里假设该用户已通过验证并获得信息,即用户;//该接口模拟将用户信息保存到session中;app.get('/api/send',function(req,res,next){varuser={name:"neil",age:"22",address:"sz"};req.session.user=user;res.status(201).send({result:0,msg:"登录成功",data:req.session.user});});//全局验证类,前端调用该接口时,会先调用该方法验证session中是否存在用户,//如果用户不存在则抛出异常,如果存在则执行next方法;app.use(function(req,res,next){if(!req.session.user){returnnext(newError('ohno'))//处理错误}else{varuser=req.session.user;变量名=用户名;console.log('你好'+name+',欢迎来到我家');}next()//否则继续});//查询用户数据接口,模拟用户刷新或重启页面打开时需要重新建立sessionapp.get('/api/get',function(req,res,next){if(req.session.user){varuser=req.session.user;varname=user.name;res.send({result:1,msg:'Hello'+name+',欢迎来到我家。',数据:req.session.user});}});//监听3000端口varserver=app.listen(8090![clipboard.png](/img/bVPN4i));anguarl2前端调整方法实现app.component.tsimport{Component,OnInit}from'@angular/core';从'@angular/http'导入{Http};@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponentimplementsOnInit{error:any;title='应用程序有效!';构造函数(私有http:Http){}ngOnInit():void{}onSet():void{this.http.get('http://neil.com:8090/api/send').subscribe(data=>{console.log(data);},error=>this.error=error);}onGet():void{this.http.get('http://neil.com:8090/api/get').subscribe(data=>{console.log(data);},error=>this.错误=错误);}}app.component.html

{{title}}

设置数据获取数据调试后终端界面页面直接有两个按钮,模拟用户登录和页面刷新的情况。前后端代码都写好了。下面我们启动节点服务,使用调试工具测试一下这两个接口。从图中可以看出,已经可以调用节点服务器的接口了。一般来说,接口已经连接好了,那么启动前端服务后,就可以按需获取数据了,下面我们来试试。从图中可以看出,事情并没有按照我们的意愿移动。当我们点击查询的时候,并没有获取到我们保存在session中的信息。为什么,我们这里遇到了两个问题:1.前端请求2.节点服务器为每个请求开启一个新的线程;刚才用调试工具的时候不好用,现在在anguar2的真实环境下就不行了。问题出在这个请求头上,因为没有cookie,前端保存了用户,但是后面再有请求的时候,节点收不到cookie,以为是新的session,就会创建一个newsession,那么自然是查询不到之前的数据了。要解决这个问题,首先要保证在第二次请求时请求头中会携带cookie。怎么做?待续。