基于angular2实现用户登录并信息持久化的一些理解(二)
(接上篇)
上面我已经定好了目标及方案,下面我来简单实现一下后端接口及前端调用。(由于精力有限,这里不关注怎么去实现整个过程,仅描述一些本人实现过程中会遇到的问题及解决方案)
Nodejs实现简单后台服务
server.js
var express = require('express');
var app = express();
var bodyParse = require('body-parser')
var cookieParser = require('cookie-parser') ;
var session = require('express-session');app.use(cookieParser()) ;
app.use(bodyParse.urlencoded({extended:false})) ;// 这里不关注如何从前端传回用户密码,及如果去校验用户名及密码的正确性;
// 这里假设已经通过验证并获取用户信息,即user;
// 这个接口模拟将用户信息保存到session中;
app.get('/api/send', function (req, res, next) {var user = {name: "neil",age: "22",address: "sz"};req.session.user = user;res.status(201).send({result: 0, msg: "登录成功", data: req.session.user});
});// 全局验证类,当前端调用接口时会先调用此方法验证session中是否存在user,
// 如果不存在user则抛出异常,如果存在则执行下一个方法;
app.use(function (req, res, next) {if (!req.session.user) {return next(new Error('oh no')) // handle error} else {var user = req.session.user;var name = user.name;console.log('你好' + name + ',欢迎来到我的家园。');}next() // otherwise continue
});// 查询用户数据接口,模拟用户刷新或者重新打开页面时需要重新建立session会话
app.get('/api/get', function (req, res, next) {if (req.session.user) {var user = req.session.user;var name = user.name;res.send({result: 1, msg: '你好' + name + ',欢迎来到我的家园。', data: req.session.user});}
});// 监听3000端口
var server=app.listen(8090
![clipboard.png](/img/bVPN4i)
) ;
anguarl2前端调用方法实现
app.component.ts
import {Component, OnInit} from '@angular/core';
import {Http} from '@angular/http';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {error: any;title = 'app works!';constructor(private 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.error = error);}
}
app.component.html
<h1>{{title}}
</h1>
<button (click)="onSet()">设置数据</button>
<button (click)="onGet()">获取数据</button>
调试后端接口
页面上直接上两个按钮,来模拟用户登录及刷新页面的情况。前后端代码已经写好,现在来启动一下node服务,并用调试工具来测试下这两个接口。
从图上可以看到,node服务端的接口已经可以进行调用了。一般来说,接口已经通了,那么是不是启动前端服务后,就可以如愿地取到数据呢,下面来试下。
从图片中可以看到,事情并没有按我们的意愿在行走,我们点击查询的时候,并没有获取到我们已经保存到session中的信息,why,这里我们遇到了两个问题:
1、前端请求的时候,请求头并没有cookie;
2、node服务端对每个请求新开了一个线程;
我们刚才用调试工具的时候不是好好的,现在到了anguar2真实环境即不行了呢,问题就出现在这个请求头上,因为没有带cookie,所以前端保存了user,但后面再来一个请求的时候,node没有接收到cookie,认为是一个新的会话,就会新创建一个session,所以自然查询不到之前的数据。要解决这个问题,首先得保证在第二次请求的时候请求头要带一个cookie过去,怎么做?待续。
基于angular2实现用户登录并信息持久化的一些理解(二)相关推荐
- 基于jwt的用户登录认证
最近在app的开发过程中,做了一个基于token的用户登录认证,使用vue+node+mongoDB进行的开发,前来总结一下. token认证流程: 1:用户输入用户名和密码,进行登录操作,发送登录信 ...
- php注册登录描述,基于PHP实现用户登录注册功能的详细教程
教程前先给大家看看小编的实现成果吧! 图1: 图2: 图3: 教程: 实现这个功能我们需要五个php文件: login.php (登录界面,如图2) 登录 登录页面 用户名: required=&qu ...
- java web网站实例_Java Web开发: 基于HttpServlet的用户登录网站 实例
2013-02-04 20:50 814人阅读 评论(0) 一个简单的小例子,基于httpservlet的用户登录(杂家是菜鸟刚接触javaee,只能从最简单出发了),首先看业务逻辑: 有三个文件组成 ...
- 【安卓】基于SharedPreferences实现用户登录信息的存储
1. 设计登录页面 比较简单,重要的点就一个,有一个记住密码的按钮. 代码实现 <?xml version="1.0" encoding="utf-8"? ...
- Spring Security基于数据库认证用户登录
Spring Security为我们提供了默认的登录页面,通过重写以AuthenticationManagerBuilder为参数的configure方法,我们可基于各种数据存储来认证用户,比如内存. ...
- phpcms首页如加上用户登录的信息?
请看效果图 我用的是cookie的方法,请先打开discuz的文件 \source\function\function_member.php 找到函数function setloginstatus() ...
- 脚本实现用户登录显示信息
我们在这里用脚本加组策略来实现. 我们对整个域里的所有用户做策略. 在这里要注意要把脚本复制到这个LOGON目录下. 下面是我脚本的内容,主要用到的就是MSGBOX语句. 刷新组策略. 登录客户端,显 ...
- 正则表达式 常规的一些用户登录验证信息
1.用户名.2.密码强度.3.整数.4.数字.5.电子邮件地址(Email).6.手机号码.7.身份证号.8.URL地址. 9.IPv4地址. 10.十六进制颜色. 11.日期.12. QQ号码.13 ...
- 数据库中用户登录注册用户信息表怎么设计如何设计
用户登录 站内登录:用户信息+密码的验证形式: 用户名+密码, 手机+密码, 站外授权:第三方登录, 其实它也是用户信息+密码的形式, 用户信息即第三方系统中的ID(第三方登录一定会给一个在他们系统中 ...
最新文章
- 第一章 关于linux历史
- python3 requirements使用方法 ~= >= <
- Fork/Join 框架介绍
- 用ASP.NET Core 2.1 建立规范的 REST API -- 保护API和其它
- 【测绘程序设计】高斯克吕格投影:带号及中央经度计算神器V1.0(附源程序)
- 浅谈流处理算法 (1) – 蓄水池采样
- 信安教程第二版-第16章网络安全风险评估技术原理与应用
- accessibility-service 高版本无法编译_今天我把APP的编译速度缩短了近5倍
- python classmethod static_python classmethod和 staticmethod的心得
- Fundamentals of speech signal processing
- Windows平台release版本内存泄漏检查办法
- 002java面试笔记——【java基础篇】从团800失败面试总结的java面试题
- Visual Studio 报错:未能加载工具箱项,将从项目中移除
- Day25 - Event Capture, Propagation, Bubbling and Once
- Lotus Notes 7.0找不到服务器路径
- TCL发布两款可穿戴设备;中兴通讯推出第三代5G室内路由器;绘王联合制作《河岸》获棕榈泉国际短片电影节最佳动画奖 | 全球TMT...
- OCR识别--详解驾驶证识别技术
- latex调行距_LaTeX 的行距机制
- 窗口最小化后在任务栏上看不到
- 音乐心理学 | 乐理知识