本周写了登录方面的内容，理清了一些思路。

先写一下遇到的其余方面的问题：

问题一


过后莫名就呈现了这个.angular文件，后果push的时候报错：超出文件大小。
在.gitignore中疏忽掉.angular后仍旧上传。而后尝试着新建分支后把代码合一下再上传，但如同没有起作用。
最初解决办法是回退版本：
抉择相应的文件，右键点击git，而后show histroy ,抉择须要回退到的分支后，reset current Branch to here，就能够回退到相应的版本。

问题二


ng s的时候控制台报了这个错，看起来应该是循环注入报的错，然而不晓得从何下手。组件名仅为t，而且文件地位也没有参考价值。最初解决办法是参考历史代码，
发现在app.module.ts中没有注入HttpClinentModule引起的。引入后运行失常。

问题三

在想给路由id为1的参数的时候，控制台报错parmsSubject为null。

fit('should create', () => {    route.paramsSubject.next({id: 1});   ...  });

之后发现注入的RouterTestingModule引的angular库的，不是团队的库。
如果不必团队的库的话，解决办法是间接调用loadById办法测试。

登录

大略画了一个流程图

来一步步依据代码来了解一下。

一

V层通过submit提交from表单，并触发login办法

<form [formGroup]="loginForm" (ngSubmit)="login()">

二

login办法中：调用userService.login()办法，并以结构的user作为形参。

const user = {      username: this.loginForm.get('username').value as string,      password: this.loginForm.get('password').value as string    };    this.userService.login(user)      .subscribe(next:() => {},error:() => {})

三

userService中的login办法：

login(user: { username: string, password: string }): Observable<User> {    // 新建Headers，并增加认证信息    let headers = new HttpHeaders();    // 增加 content-type    headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');    // 增加认证信息    headers = headers.append('Authorization',      'Basic ' + btoa(user.username + ':' + encodeURIComponent(user.password)));    // 发动get申请并返回    return this.httpClient.get<User>(`${this.baseUrl}/login`, {headers})      .pipe(tap(data => this.setCurrentLoginUser(data)));  }

1.首先结构一个HttpHeaders。
2.给其增加 content-type.其中Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据依照 key1=val1&key2=val2 的形式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种形式有很好的反对。例如 PHP 中, $_POST['title'] 能够获取到 title 的值，$_POST['sub'] 能够失去 sub 数组
3.
encodeURIComponent()办法对明码进行编码。
起因：如果明码字符串中蕴含了=或者&，那么势必会造成接管Url的服务器解析谬误，因而必须将引起歧义的&和=符号进行本义， 也就是对其进行编码。
如将符号=，本义成%3D。
btoa() 办法用于创立一个base-64 编码的字符串，也就说将编码好的明码和账号拼一起进行btoa编码。
4.将构建好的header作为申请头，向后盾发送get申请。

四：若申请胜利

申请胜利的状况下，后盾会return一个user，在pipe管道下用tap办法作为data，调用办法，在userService中设置以后登录的user。

return this.httpClient.get<User>(`${this.baseUrl}/login`, {headers})      .pipe(tap(data => this.setCurrentLoginUser(data)));

同时因为申请胜利，并在步骤二中订阅了其变动，故会触发next回调函数

this.userService.login(user)      .subscribe(next:() => {},error:() => {})

在next回调函数中，通过navigateByUrl办法跳转到首页的url。登录胜利。

this.router.navigateByUrl('url').then();

四：若申请失败

申请失败的状况下，后盾会返回一个状态为401，类型为HttpErrorResponse的Observable。

return new Observable<HttpErrorResponse>(subscriber => {              subscriber.error(new HttpErrorResponse({status: 401}));              subscriber.complete();

同时因为申请失败，并在步骤二中订阅了其变动，故会触发error回调函数

this.userService.login(user)        .subscribe(next:() => {},error:() => {})

error回调函数中：能够打印报错信息，并使errorInfo为登录失败，显示在v层。示意用户从新输出，

(response) => {        const errorCode = +response.headers.get('code');        const errorMessage = response.headers.get('message';        console.log(`产生谬误：${errorCode}, ${errorMessage}`);        this.errorInfo = '登录失败，请查看您填写的信息是否正确';

总结

本周播种了登录方面的思路和细节，并了解了登录申请和RoutingModule以及依赖注入的代码逻辑。