Angular使用Session Storage來做簡單的登入登出範例。
範例環境：
- Windows 64 Bit
- Angular CLI: 7.3.9
- Angular: 7.2.16
Angular專案建好後先把app.component.html的預設內容刪除，
只留下<router-outlet></router-outlet>。
app.component.html
<router-outlet></router-outlet>
範例使用雙向繫結(two-way binding)來接收輸入值，因此需把@angular/forms的FormsModule加入專案模組中。開啟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設定LoginComponent的Route 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按鈕時，清空sessionStorage中key=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
參考：
沒有留言:
張貼留言