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

发布时间:2019-06-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了基于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服务,并用调试工具来测试下这两个接口。

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

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

从图上可以看到,node服务端的接口已经可以进行调用了。一般来说,接口已经通了,那么是不是启动前端服务后,就可以如愿地取到数据呢,下面来试下。

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

从图片中可以看到,事情并没有按我们的意愿在行走,我们点击查询的时候,并没有获取到我们已经保存到session中的信息,why,这里我们遇到了两个问题:
1、前端请求的时候,请求头并没有cookie;
2、node服务端对每个请求新开了一个线程;

我们刚才用调试工具的时候不是好好的,现在到了anguar2真实环境即不行了呢,问题就出现在这个请求头上,因为没有带cookie,所以前端保存了user,但后面再来一个请求的时候,node没有接收到cookie,认为是一个新的会话,就会新创建一个session,所以自然查询不到之前的数据。要解决这个问题,首先得保证在第二次请求的时候请求头要带一个cookie过去,怎么做?待续。

脚本宝典总结

以上是脚本宝典为你收集整理的基于angular2实现用户登录并信息持久化的一些理解(二)全部内容,希望文章能够帮你解决基于angular2实现用户登录并信息持久化的一些理解(二)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。