ng new jwtauth-app
cd jwtauth-app
ng serve --open
ng g component login
ng g component home
ng g service services/authentication
ng g guard guard/auth
( CanActivate を選択して作成する )
app/guard/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../services/authentication.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private authService: AuthenticationService,
private router: Router
) { }
canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if ( !this.authService.isAuthenticated() ) {
this.router.navigate(['login']);
return false;
}
return true;
}
}
作成したガードを app/app.module.ts へ読み込ませる
( import して @NgModuleのprovidersに追加する )
app/app.module.ts
// guard
import { AuthGuard } from './guard/auth.guard';
@NgModule({
........
providers: [AuthGuard],
})
mkdir src/app/models
vi src/app/models/user.ts
user.ts
export class User {
id: number;
username: string;
password: string;
firstName: string;
lastName: string;
token?: string;
}
app/home/<いくつかのファイル>
app/login/<いくつかのファイル>
app/services/<いくつかのファイル>
が作成されます
npm install --save bootstrap jquery popper.js
angular.json に以下を追加
"styles": [
"src/styles.scss" ,
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
npm install @auth0/angular-jwt
app/app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
imports: [
ReactiveFormsModule , // 追加
],