给angular2项目添加token并在其余页面上获取

先说明下token的原理吧！

在浏览器端的结果是这样的：

登陆成功的话，将token添加到cookie中，其余页面进行请求时，都要带上token值，来增长一层保护机制。好了，接下来说具体实现吧！

一、安装 ngx-cookie-service

我用的是angular-cil，接下来的代码也是angular-cil的

npm install ngx-cookie-service --save

二、引入模块且声明

在app.module.ts里引入ngx-cookie-service,并声明服务

import { CookieService } from "ngx-cookie-service";
 providers: [ CookieService  ],

三、在组件内使用

组件.ts里

import { CookieService } from 'ngx-cookie-service';
// 引入http，请求接口用的
import { HttpClient, HttpHeaders } from '@angular/common/http';
// 这个是用来跳转页面的
import {  ActivatedRoute,  Router,  ActivatedRouteSnapshot,  RouterState,  RouterStateSnapshot } from '@angular/router';
export class YourComponent implements OnInit {
  constructor(
    private http: HttpClient,
    private cookieService: CookieService,
    public router: Router
  ) { }
  // 登陆的接口请求
  const httpOption = {
      headers : new HttpHeaders({
        'content-type': 'application/json',
      })
    };
 this.http.post('url', {
      json参数
    }, httpOption).subscribe((res: any) => {
    // token值存储在接口的返回值里，用res.获取
	const token = 'token值'
	// 存储token（三选一）
	this.cookieService.set('token', token);  //这个是没有设置token时效
	this.cookieService.set('Abp.AuthToken', token, 1, '/'); // 这个是设置token的时效是1天
	this.time = 12 * 60 * 60 * 1000;
	this.cookieService.set('Abp.AuthToken', token, new Date(new Date().getTime() + this.time)); // 这个是用来设置token的时效是非整数
	// 进行页面跳转（重定向）（已经提早设置好路由了）
	this.router.navigate(['/index']);
	})
}

四、在其余页面（组件里获取）

组件.ts里

import { CookieService } from 'ngx-cookie-service';
export class YourComponent implements OnInit {
    public token: any;
	constructor(private cookieService: CookieService) { 
		// 获取token
	    this.token = this.cookieService.get('token');
	    // 若是没有token，就跳转到登录页面
	    if ( this.token === '' ) {
	     this.router.navigate(['/login']);
	    }
	  }

说一些token的简单操做

一、储存cookie
this.cookieService.set(“userId”,this.userId,new Date(new Date().getTime() + this.time));
this.cookieService.set(“userName”,response.data.name,new Date(new Date().getTime() + this.time));

二、读取cookie
this.cookieService.get(“userId”);
this.cookieService.get(“userName”);

三、从新存储cookie
this.cookieService.set(“userId”,this.cookieService.get(“userId”),new Date(new Date().getTime() + this.time));
this.cookieService.set(“userName”,this.cookieService.get(“userName”),new Date(new Date().getTime() + this.time));

四、删除cookie
this.cookieService.delete(“userId”);

学习网址：

关于angular的 ngx-cookie-service：https://www.npmjs.com/package/ngx-cookie-service
关于angular-cil的 ngx-cookie-service：
https://github.com/angular/angular-cli/blob/master/README.md
关于cookie详细方法及使用：https://blog.csdn.net/qq_39252501/article/details/79608198

注意事项

在存储cookie的时候，能够不用设置存活时间，但最好设置存活时间，存活时间必定要是当前时间+存活时间，否则会出现没法删除这个cookie的状况
time: number = 2*60*60*1000;// cookie过时时间两个小时 2*60*60*1000
new Date(new Date().getTime() + this.time)
既是：
this.cookieService.set("token", token值, new Date(new Date().getTime() + this.time));