angular7中使用请求拦截和token验证

对于任何一个应用来说，安全都是必不可少的操作。

一般安全验证的比较流行的方式是：token验证

后台生成一个token，第一次登陆成功之后，将token从后台携带回来，然后前端每次的请求都要将token带到后台。后台验证有没有token且是否相同，并且设置token的有效期。

编写拦截器(拦截器直接建立ts类文件即可，无需是服务)

interceptor.service.ts

import { Injectable } from '@angular/core';

import {HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler) {

        let authReq: any;
        console.log(req.url);
        // 实现第一次不拦截的方式：1. 指定接口不拦截  2. 判断本地localStorage
        if (req.url !== 'http://localhost:4200/api/VirtualFactoryUserLogin') {
            if (localStorage.getItem('access_token')) {
                const token = localStorage.getItem('access_token');
                authReq = req.clone({ setHeaders: { token } });
                return next.handle(authReq);
            }
        }

        authReq = req.clone({ setHeaders: {} });
        return next.handle(authReq);

    }

}

提供这个拦截器

也可以直接把这个提供商添加到 AppModule 中的提供商数组中，不过那样会非常啰嗦。况且，你将来还会用这种方式创建更多的拦截器并提供它们。 你还要特别注意提供这些拦截器的顺序。

认真考虑创建一个封装桶（barrel）文件，用于把所有拦截器都收集起来，一起提供给 httpInterceptorProviders 数组，可以先从这个 NoopInterceptor 开始。

http-interceptors\index.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { InterceptorService } from 'src/app/services/interceptor.service';

export const httpInterceptorProviders = [
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
];

在app.module.ts中注入

app/app.module.ts

providers: [
  httpInterceptorProviders
],

登陆测试

// 表单提交
    submitForm(): void {
        const obj = {
            UserName: this.userInfo.username,
            Password: this.userInfo.password,
            grant_type: 'password'
        };
        console.log(obj);
        this.http.doPost('api/VirtualFactoryUserLogin', obj).subscribe((data: any) => {
            console.log(data);
            if (data.access_token) {
                sessionStorage.setItem('access_token', data.access_token);
                this.router.navigate(['/home']);
            }
        });

        // 路由守卫测试
        // sessionStorage.setItem('access_token', 'data.access_token');
        // this.router.navigate(['/home']);
    }