Angular 網站實例 – 記得我篇

上次我們已經成功連上了後端，但是只要使用者ㄧ重新刷瀏覽器，又會回到未登入狀態，今天我們就來讓前端記住登入狀態。

在前端要記住一些資料，我們會用到 cookie ，local storage或者 session storage，至於它們的不同點，可以參考 stackoverflow這篇文章，我們先來做一個有關 local storage 的服務 (service)

公用服務 (utility service)
第一步：造一個 src/apprvices 目錄

mkdir servcies
第二步： 用 angular-cli 產生服務並自動註冊到 app.module.ts

ng generate service utils –module app
第三步：加入 jsonwebtoken 來判斷 token 是否逾期

npm install @auth0/angular-jwt –save
記得使用這個套件，其它套件不能夠跟新的 HttpClientModule 相容

第四步：修改 app.module.ts，導入 JwtModule

// … 省略
import { HttpClientModule } from ‘@angular/commontp’;
import { JwtModule } from ‘@auth0/angular-jwt’;

//… 省略
@NgModule({
//…
imports: [
//…
HttpClientModule,
JwtModule.forRoot({
config: {
tokenGetter: () => {
return localStorage.getItem(‘access_token’);
},
whitelistedDomains: [‘localhost:3000’]
}
})
],
//…
記得同時導入 HttpClientModule 跟 JwtModule

第五步：修改 utils.service.ts

import { Injectable } from ‘@angular/core’;
import { JwtHelperService } from ‘@auth0/angular-jwt’;
export const TOKEN = ‘access_token’;
@Injectable()
export class UtilsService {
constructor(
private jwtHelper: JwtHelperService
) { }

isTokenExpired(token: string = TOKEN): boolean {
let jwtStr = this.getToken(token);
if (jwtStr) {
return this.jwtHelper.isTokenExpired(jwtStr);  // token expired?
} else {
return true;        // no token
}
}

writeToken(value: string, token: string = TOKEN) {
localStorage.setItem(token, value);
}

getToken(token: string = TOKEN) {
return localStorage.getItem(token);
}

removeToken(token: string = TOKEN) {
if (this.getToken(token)) {
localStorage.removeItem(token);
}
}
}
預設的 token 的關鍵(key) 為 access_token，為了可以寫入不同的關鍵，我們參數保留了 token 這個關鍵。
第六步： 將 index.ts 加入 src/apprvices

export * from ‘./utils.servcie’;
修改使用者服務
第一步：導入公用服務

// … 省略
import { UtilsService } from ‘../..rvices’;

@Injectable()
export class UserService {
loginStatus = new BehaviorSubject<boolean>(false);
currentUser = new BehaviorSubject<User>(null);
constructor(
private http: HttpClient,
private appConfig: AppConfig,
private utils: UtilsService
) { }
// … 省略
第二步：修改 login() 程式，後端驗證成功會傳回關鍵值 (value)，如果使用者有勾選 記得我，我們用公用服務將它寫入 localstorage

// … 省略
login(loginData): Observable<boolean> {
return this.loginServer(loginData)
.map((res: Response) => {
if (res.success) {
this.loginStatus.next(true);
this.currentUser.next(loginData.username);
if (loginData.rememberMe) {
this.utils.writeToken(res.payload);
}
return true;
} else {
return false;
}
},
//… 省略
第三步：修改 logout()，登出時將 token 清掉

logout() {
this.loginStatus.next(false);
this.currentUser.next(null);
this.utils.removeToken();
}
第四步：加入 checkuser() 函數

// when startup
checkUser(): Observable<boolean> {
if (!this.utils.isTokenExpired()) {
this.loginStatus.next(true);
return of(true);
} else {
console.log(‘no token or token is expired’);
this.utils.removeToken();
return of(false);
}
}
這個函數馬上會用到，基本上是先檢查 token 有沒有過期，沒有的話將 loginStatus 設為真

第五步：確認
做登入後檢查是否 localstorage 已經寫入，正常狀態如截圖