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
參考:
沒有留言:
張貼留言