AdSense

網頁

2020/4/10

Angular 使用Session Storage登入登出簡單範例

Angular使用Session Storage來做簡單的登入登出範例。

範例環境:

  • Windows 64 Bit
  • Angular CLI: 7.3.9
  • Angular: 7.2.16

首先用Angular CLI建立一個新專案

Angular專案建好後先把app.component.html的預設內容刪除, 只留下<router-outlet></router-outlet>

app.component.html

<router-outlet></router-outlet>

範例使用雙向繫結(two-way binding)來接收輸入值,因此需把@angular/formsFormsModule加入專案模組中。開啟app.modules.ts並在@NgModule中匯入FormsModule

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- 匯入FormsModule

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule // <-- 加入FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然後在命令工具用ng generate component login指令建立LoginComponent。參考使用Angular CLI建立Component元件

LoginComponent建立好後開啟app-routing.module.ts設定LoginComponentRoute path為login

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component'; // <-- 匯入LoginComponent

const routes: Routes = [
  {path:'login', component:LoginComponent} // <-- 設定LoginComponent的path
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

LoginComponent (login.component.ts)新增內容如下。登入login()的帳號為matt,密碼123

LoginComponent (login.component.ts)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  username: string; // 1. binding頁面的[(ngModel)]="username"
  password: string; // 2. binding頁面的[(ngModel)]="password"
  isFail: boolean = false; // 3. 是否登入失敗
  warnMessage: string = '帳號或密碼錯誤'; // 4. 登入失敗的錯誤訊息

  ngOnInit() {
  }

  /** 5. 登入 */
  login() {
    if (this.username === 'matt' && this.password === '123') {
      sessionStorage.setItem('user', this.username);
      this.isFail = false;
    } else {
      this.isFail = true;
    }
  }

  /** 6. 是否已經登入 */
  isLogin() {
    return sessionStorage.getItem('user') !== null;
  }

  /** 7. 登出 */
  logout() {
    sessionStorage.removeItem('user');
  }

}

username屬性: 用在login.component.html頁面<input>輸入欄位的[(ngModel)]="username"

password屬性: 用在login.component.html頁面<input>輸入欄位的[(ngModel)]="password"

isFail屬性: 用在login.component.html頁面的*ngIf='isFail',決定是否顯示登入失敗提示訊息。

warnMessage屬性: 用在login.component.html頁面的{{warnMessage}},登入失敗提示訊息內容。

login()函式: 用在login.component.html頁面的登入按鈕<button (click)=login()>Login</button>的click事件綁定。
點選Login按鈕時,若輸入帳號密碼正確則登入成功,並把帳號名稱以key=user儲存在sessionStorage中。

isLogin()函式: 用在login.component.html頁面的*ngIf="isLogin()",登入成功則顯示區塊中的內容。
login()登入成功,則sessionStorage存有key=user的帳號並返回true
反之login()登入失敗,則sessionStorage不存有key=user的帳號名稱並返回false

logout()函式: 用在login.component.html頁面的登出按鈕<button (click)=logout()>Log out</button>的click事件綁定。
點選Log out按鈕時,清空sessionStoragekey=user的內容。


修改login.component.html內容如下。

login.component.html

<!-- 登入前/登出後顯示 -->
<div *ngIf="!isLogin()">
  <div style="color:red;" *ngIf='isFail'>{{warnMessage}}</div><!-- 登入失敗時顯示 -->

  <div>
    <label>帳號:<input type="text" name="username" [(ngModel)]="username"></label><br>
    <label>密碼:<input type="password" name="password" [(ngModel)]="password"></label><br>
    <button (click)=login()>Login</button>
  </div>

</div>

<hr>

<!-- 登入後顯示 -->
<div *ngIf="isLogin()">
  <h1>Hello {{username}}</h1>
  <button (click)=logout()>Log out</button>
</div>

完成以上後啟動專案,登入登出的效果如下。



範例專案的src/app目錄結構如下。

../src/app
│  app-routing.module.ts
│  app.component.css
│  app.component.html
│  app.component.spec.ts
│  app.component.ts
│  app.module.ts
│
└─login
        login.component.css
        login.component.html
        login.component.spec.ts
        login.component.ts


參考:

沒有留言:

AdSense