如何實現身份驗證保護

Question

我想實施兩名警衛。 不允許未經授權的用戶訪問某些頁面。 第二種將不允許授權用戶訪問頁面“登錄”和“注冊”。 但是它們都無法正常工作。

相反，不應該允許未經授權的用戶使用的警衛連續放手。 並且不應該在授權頁面上啟動的防護打開頁面。 我做錯了什么？

路線：

import { Routes } from '@angular/router';
import { SignUpComponent } from './app/login/sign-up/sign-up.component';
import { SignInComponent } from './app/login/sign-in/sign-in.component';
import { ChatRoomComponent } from './app/layout/chat-room/chat-room.component';
import { PreventLoggedInAccess } from './app/shared/guards/prevent-logged-in.access';
import { AuthGuard } from './app/shared/guards/auth.guard';

export const appRoutes: Routes = [
    { path: '', redirectTo: 'chat', pathMatch: 'full'},
    { path: 'sign-up', component: SignUpComponent, canActivate: [PreventLoggedInAccess]  },
    { path: 'sign-in', component: SignInComponent, canActivate: [PreventLoggedInAccess]  },
    { path: 'chat', component: ChatRoomComponent, canActivate: [AuthGuard] }
];

auth.guard.ts：

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

@Injectable()

export class AuthGuard implements CanActivate {

    constructor(private authService:AuthService,
        private router:Router){}

  canActivate() {
    if(this.authService.authUser()){
      return true;
    }else{
      this.router.navigate(['/sign-in']);
      return false;
    }
  }
} 

防止-登錄in.access.ts：

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

@Injectable()

export class PreventLoggedInAccess implements CanActivate {

  constructor(
    private authService:AuthService
  ) {}

  canActivate() {
    return !this.authService.authUser();
  }
} 

authservice：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { User } from '../models/user.model';

@Injectable()

export class AuthService {
  private user: Observable<firebase.User>;
  private authState: any;

  constructor(private dbAuth: AngularFireAuth,
    private db: AngularFireDatabase,
    private router: Router) {
      this.user = dbAuth.authState;
    }

    authUser() {
      return this.user;
    }
....

}

Answer 1

canActivate方法需要返回布爾值以拒絕或允許權限，因此您必須像以下authservice一樣更新canActivate的返回類型：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { User } from '../models/user.model';

@Injectable()

export class AuthService {
  private user: Observable<firebase.User>;
  private authState: any;
private returnValue:any;

  constructor(private dbAuth: AngularFireAuth,
    private db: AngularFireDatabase,
    private router: Router) {
      this.user = dbAuth.authState;
      this.user.subscribe(result=>{
        this.returnValue=result;
      });
    }

    authUser() {
      return this.returnValue;
    }
}

防止-登錄in.access.ts：

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

@Injectable()

export class PreventLoggedInAccess implements CanActivate {

  constructor(
    private authService:AuthService
  ) {}

  canActivate() {
    if(this.authService.authUser()){
       return false;
    }
    else{
       return true;
    }
  }
}