如何实现身份验证保护

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;
    }
  }
}