基于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,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',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过去，怎么做？待续。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!