(接上篇)
上面我已经定好了目标及方案,下面我来简单实现一下后端接口及前端调用。(由于精力有限,这里不关注怎么去实现整个过程,仅描述一些本人实现过程中会遇到的问题及解决方案)

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实现用户登录并信息持久化的一些理解(二)相关推荐

  1. 基于jwt的用户登录认证

    最近在app的开发过程中,做了一个基于token的用户登录认证,使用vue+node+mongoDB进行的开发,前来总结一下. token认证流程: 1:用户输入用户名和密码,进行登录操作,发送登录信 ...

  2. php注册登录描述,基于PHP实现用户登录注册功能的详细教程

    教程前先给大家看看小编的实现成果吧! 图1: 图2: 图3: 教程: 实现这个功能我们需要五个php文件: login.php (登录界面,如图2) 登录 登录页面 用户名: required=&qu ...

  3. java web网站实例_Java Web开发: 基于HttpServlet的用户登录网站 实例

    2013-02-04 20:50 814人阅读 评论(0) 一个简单的小例子,基于httpservlet的用户登录(杂家是菜鸟刚接触javaee,只能从最简单出发了),首先看业务逻辑: 有三个文件组成 ...

  4. 【安卓】基于SharedPreferences实现用户登录信息的存储

    1. 设计登录页面 比较简单,重要的点就一个,有一个记住密码的按钮. 代码实现 <?xml version="1.0" encoding="utf-8"? ...

  5. Spring Security基于数据库认证用户登录

    Spring Security为我们提供了默认的登录页面,通过重写以AuthenticationManagerBuilder为参数的configure方法,我们可基于各种数据存储来认证用户,比如内存. ...

  6. phpcms首页如加上用户登录的信息?

    请看效果图 我用的是cookie的方法,请先打开discuz的文件 \source\function\function_member.php 找到函数function setloginstatus() ...

  7. 脚本实现用户登录显示信息

    我们在这里用脚本加组策略来实现. 我们对整个域里的所有用户做策略. 在这里要注意要把脚本复制到这个LOGON目录下. 下面是我脚本的内容,主要用到的就是MSGBOX语句. 刷新组策略. 登录客户端,显 ...

  8. 正则表达式 常规的一些用户登录验证信息

    1.用户名.2.密码强度.3.整数.4.数字.5.电子邮件地址(Email).6.手机号码.7.身份证号.8.URL地址. 9.IPv4地址. 10.十六进制颜色. 11.日期.12. QQ号码.13 ...

  9. 数据库中用户登录注册用户信息表怎么设计如何设计

    用户登录 站内登录:用户信息+密码的验证形式: 用户名+密码, 手机+密码, 站外授权:第三方登录, 其实它也是用户信息+密码的形式, 用户信息即第三方系统中的ID(第三方登录一定会给一个在他们系统中 ...

最新文章

  1. 第一章 关于linux历史
  2. python3 requirements使用方法 ~= >= <
  3. Fork/Join 框架介绍
  4. 用ASP.NET Core 2.1 建立规范的 REST API -- 保护API和其它
  5. 【测绘程序设计】高斯克吕格投影:带号及中央经度计算神器V1.0(附源程序)
  6. 浅谈流处理算法 (1) – 蓄水池采样
  7. 信安教程第二版-第16章网络安全风险评估技术原理与应用
  8. accessibility-service 高版本无法编译_今天我把APP的编译速度缩短了近5倍
  9. python classmethod static_python classmethod和 staticmethod的心得
  10. Fundamentals of speech signal processing
  11. Windows平台release版本内存泄漏检查办法
  12. 002java面试笔记——【java基础篇】从团800失败面试总结的java面试题
  13. Visual Studio 报错:未能加载工具箱项,将从项目中移除
  14. Day25 - Event Capture, Propagation, Bubbling and Once
  15. Lotus Notes 7.0找不到服务器路径
  16. TCL发布两款可穿戴设备;中兴通讯推出第三代5G室内路由器;绘王联合制作《河岸》获棕榈泉国际短片电影节最佳动画奖 | 全球TMT...
  17. OCR识别--详解驾驶证识别技术
  18. latex调行距_LaTeX 的行距机制
  19. 窗口最小化后在任务栏上看不到
  20. 音乐心理学 | 乐理知识

热门文章

  1. TCP三次握手与四次挥手
  2. ArcSDE 9.1 for Oracle10g on Solaris 10
  3. Android Studio配置统一管理依赖版本号引用
  4. 照葫芦画瓢-class(类)
  5. 行如风 Angular 初识3
  6. 实验六 快速生成树配置
  7. 华为认证网络互连专家-HCIE-RS模拟试卷
  8. 让手机站点像原生应用的四大途径
  9. VMware虚拟产品简介
  10. 软件工程几点总结要点