Angular Stock登入(三)(Day23)

今天我们要来串接我们之前写好的使用者登入的API连结。

昨天我们已经可以在按钮绑定的doLogin方法上取得输入的account&password的值了
接下来我们要开始与之前写的API登入进行串接，还记得我们之前实作过使用者登入吗?
忘记的话可以去看之前实作:JWT实作(四)

Angular有提供与後端连接的模组

@angular/common/http:

Most front-end applications need to communicate with a server over the HTTP protocol, to >download or upload data and access other back-end services. Angular provides a client HTTP API >for Angular applications, the HttpClient service class in @angular/common/http.

大意是大部分的前後端连结的应用都可以使用这个模组完成

HttpClient: 提供http连线的物件

The ability to request typed response objects. :可以要求回传物件的格式
Streamlined error handling. :错误处理
Testability features.: 可以进行测试
Request and response interception. : 请求和回传的拦截

好了，介绍完HttpClient的资讯让我们开始进行实作吧

首先在app.module.ts引入模组


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ZingchartAngularModule } from 'zingchart-angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ZingchartAngularModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule #新增模组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接着新增一个service用来放置我们要用来负责连线的service

service/http.service.ts


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { HttpParams, HttpHeaders } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class HttpService {
  private url = 'http://localhost:8080/user/login';
  constructor(private http: HttpClient) { }

  getPosts(account: string, password: string) {
#设置帐号&密码的参数
    let headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'responseType': 'json'
    });
    let options = {
      headers
    };
    let params = {
      'account': account,
      'password': password
    };

    return this.http.post<any>(this.url, params, options);
  }
}

接着在login.component.ts放入HttpService


import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { HttpService } from '../service/http.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  title = "登入";
  account = new FormControl('', [Validators.required, Validators.maxLength(10)]); //验证字数须大於10个字
  password = new FormControl('', [Validators.required, Validators.minLength(3)]);//验证字数须不少於3个字
  posts: any;
  constructor(private httpService: HttpService) {

  }

  ngOnInit(): void {

  }
  doLogin() {

    this.httpService.getPosts(this.account.value, this.password.value).subscribe(
      (response) => { this.posts = response; console.log(response) },
      (error) => { console.log(error); });
  }
}

接下来我们必须对我们AngularAPI专案进行一些设定


@CrossOrigin(origins = "*", maxAge = 3600)
	@PostMapping("login")
	public APIReturnObject login(@RequestBody User user) {
		APIReturnObject result = new APIReturnObject();
		Map<String, Object> data = new HashMap<String, Object>();
		String token = jWTService.generateToken(user);
		result.setMessage("登入成功，取得token");
		data.put("token", token);
		result.setData(data);
		return result;
	}

在我们的登入连结上加上@CrossOrigin的标签，可以防止等一下登入时发生Access-Control-Allow-Origin的问题

接着让我们来实际操作啦~!

首先在登入页上按F12