Angular 2의 관리자 인증

Question

사용자 이름 "Admin@gmail.com"과 비밀번호 "Admin"으로 로그인 한 후 사용자가 로그인하여 홈 페이지로 리디렉션되도록 웹 사이트를 구현하려고합니다. 그러나 사용자가 지정된 값 이외의 값을 지정하면 웹 사이트에서 오류가 발생합니다.

각도 2에 코드를 작성하여 어떻게 할 수 있습니까?

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router'; 
import { AuthService } from '../../Services/auth.service'; 

@Component({ 
    templateUrl: './login.component.html', 
}) 
export class LoginComponent { 
    message: string; 
    constructor(public authService: AuthService, public router: Router) { 
    this.setMessage(); 
    } 

    setMessage() { 
    this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out'); 
    } 

    login() { 
    this.message = 'Trying to log in ...'; 

    this.authService.login().subscribe(() => { 
     this.setMessage(); 
     if (this.authService.isLoggedIn) { 
     // Get the redirect URL from our auth service 
     // If no redirect has been set, use the default 
     let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/home'; 

     // Redirect the user 
     this.router.navigate([redirect]); 
     } 
    }); 
    } 

    logout() { 
    this.authService.logout(); 
    this.setMessage(); 
    } 


} 

그리고 내 login.component.html 파일은 다음과 같습니다 : 당신은 루트 가드를 사용할 수 있습니다

<h1>Please login to proceed</h1> 
<br /> 
<br /> 
<form > 
    <table border="0"> 
     <tr> 
      <td> 
       <div class="form-group"> 
        <label for="uname" style="display: inline-block">Username:* &emsp;</label> 
       </div> 
      </td> 
      <td> 
       <div class="form-group"> 
        <input style="display: inline-block" id="uname" type="text" class="form-control" 
          placeholder="Username"> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="form-group"> 
        <label for="pwd" style="display: inline-block">Password:* &emsp;</label> 
       </div> 
      </td> 
      <td> 
       <div class="form-group"> 
        <input style="display: inline-block" type="password" class="form-control" 
          placeholder="Password"> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p style="color: red">* Required Fields</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <p> 
        <button class="btn btn-info" (click)="login()" *ngIf="!authService.isLoggedIn">Login</button> 
       </p> 
      </td> 
    </table> 
</form> 

Answer 1

다음은 내 login.component.ts 파일입니다. 그것은 당신의 솔루션을 해결할 것입니다.

// SRC/응용 프로그램/인증/인증 - guard.service.ts

import { Injectable } from '@angular/core'; 
import { Router, CanActivate } from '@angular/router'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class AuthGuardService implements CanActivate { 

    constructor(public auth: AuthService, public router: Router) {} 

    canActivate(): boolean { 
    if (!this.auth.isAuthenticated()) { 
     this.router.navigate(['login']); 
     return false; 
    } 
    return true; 
    } 

} 

// SRC/응용 프로그램/이미로 인증 가드를 사용하고

import { Routes, CanActivate } from '@angular/router'; 
import { ProfileComponent } from './profile/profile.component'; 
import { AuthGuardService as AuthGuard } from './auth/auth-guard.service'; 

export const ROUTES: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }, 
    { path: '**', redirectTo: '' } 
];