关于angular:登录的实现

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

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

问题一

过后莫名就呈现了这个.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 以及依赖注入的代码逻辑。