angular - 在我的 Angular 中实施基于角色的授权后，我无法导航到特定页面

Question

我已经使用 Angular 6 创建了一个前端，我想要基于角色的授权，并使用 JWT 助手服务实现。不幸的是，成功授权后我无法导航到特定页面，我尝试了几种方法，但我无法获得正确的解决方案，请帮助我。我是角度方面的新手，一切似乎都很好，但导航到特定页面时问题就出现了。

登录组件.ts

    import { Component, OnInit } from '@angular/core';
    import { AuthService } from 'src/app/auth.service';
    import { Router } from '@angular/router';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnInit {

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

      ngOnInit() {
      }
      loginUser(event)
      {
        event.preventDefault()
        const target = event.target
        const email= target.querySelector('#email').value
        const password = target.querySelector('#password').value

         this.Auth.getUserDetails(email,password).subscribe(data =>{
           if(this.Auth.isAuthenticated(),data.token)
           {
            localStorage.setItem('token',data.token);

             return true;
           }

           else
           {
             window.alert(data.message);
           }
         });
         console.log(email,password)
      }

    }

角色.guard.ts

    import { Injectable } from '@angular/core';
    import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
    import { Observable } from 'rxjs';
    import { AuthService } from './auth.service';
    import decode from 'jwt-decode';

    @Injectable({
      providedIn: 'root'
    })
    export class RoleGuard implements CanActivate {

      constructor( public auth: AuthService,public router: Router) {}
      canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

        // this will be passed from the route config
        // on the data property
        const admintype = route.data.admintype;
        const token = localStorage.getItem('token');
        // decode the token to get its payload
        const tokenPayload = decode(token);
        if (
          !this.auth.isAuthenticated() || 
          tokenPayload.role !== admintype
        ) {
          this.router.navigate(['login']);
          return false;
        }    
        return true;
      }

}

auth.guard.ts

    import { Injectable } from '@angular/core';
    import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
    import { Observable } from 'rxjs';
    import { AuthService } from './auth.service';
    import { UserService } from './user.service';
    import { map } from 'rxjs/operators';
    import { Router } from '@angular/router'


    @Injectable({
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivate {

      constructor(private auth: AuthService,private router:Router, private user: UserService)
      {

      }

      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

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

            return true    
        }

    }

auth.service.ts

    import { Injectable } from '@angular/core';
    import{ HttpClient } from '@angular/common/http';
    import { JwtHelperService } from '@auth0/angular-jwt';
    interface myData
    {
      success:boolean,
      message: string,
      token:"token"

    }

    @Injectable({
      providedIn: 'root'
    })
    export class AuthService {
      uri : String = 'http://localhost:4000';

      private jwtHelper = new JwtHelperService();

      constructor(private http: HttpClient) { }

      public isAuthenticated(): boolean {
        const token = localStorage.getItem('token');
        // Check whether the token is expired and return
        // true or false

        if(token==null)
        {
          return false;
        }
        else{
           return !this.jwtHelper.isTokenExpired(token)

        }
      }


      getUserDetails(email: String,password:String){

        //post these details to the database
        return this.http.post<myData>(`${this.uri}/auth`,{ email,password});
      }

        signupadminsections(email:String,password:String,name:String,admintype:String,college:String,department:String)
      {
        //add new admin section
        return this.http.post(`${this.uri}/register`,{ email,password,name,admintype,college,department});
      }

    }

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, Component } from '@angular/core';
    import { RouterModule } from '@angular/router';
    import { AuthGuard } from './auth.guard';
    import { HttpClientModule } from '@angular/common/http';
    import { MatTableModule, MatInputModule, MatSelectModule} from '@angular/material'
    import { RoleGuard } from './role.guard'

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { HomeComponent } from './components/home/home.component';
    import { LoginComponent } from './components/login/login.component';
    import { AdmindashboardComponent } from './components/admindashboard/admindashboard.component';
    import { AuthService } from './auth.service';
    import { UserService } from './user.service';
    import { ViewallstudentsComponent } from './components/viewallstudents/viewallstudents.component';
    import { AdminComponent } from './components/admin/admin.component';
    import { AddsectionadminsComponent } from './components/addsectionadmins/addsectionadmins.component';
    import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';
    import { from } from 'rxjs';
    import { JwtHelperService, JwtModule } from '@auth0/angular-jwt';

    @NgModule({
      declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        AdmindashboardComponent,
        ViewallstudentsComponent,
        AdminComponent,
        AddsectionadminsComponent,
        PagenotfoundComponent
      ],
      imports: [
        JwtModule,
        MatSelectModule,
        MatTableModule,
        MatInputModule,
        BrowserModule,
        HttpClientModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        RouterModule.forChild([
          {
            path: 'login',
            component: LoginComponent

          },
          {
            path: 'admin',
            component:AdminComponent,
            data:{
              admintype:['admin']
             },
            canActivate :[RoleGuard],
          },
          {
           path:'addsectionadmin',
           component:AddsectionadminsComponent,
           data:{
            admintype:['admin']
           },
           canActivate:[AuthGuard]
          },
          {
            path: 'admindashboard',
            component: AdmindashboardComponent,
            data:{
              admintype:['sectionadmin']
             },
            canActivate: [RoleGuard]
          },
          {
             path:'viewallstudents',
             component:ViewallstudentsComponent,
             canActivate:[AuthGuard]
          },
          {
            path:'**',redirectTo:'pageNotFound'
          },
          {
            path:'',redirectTo:'login',pathMatch:'full'
          }


        ])
      ],
      providers: [ AuthGuard, UserService,AuthService,RoleGuard,JwtHelperService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

这是我在 mongodb 中的架构：

    const mongoose = require('mongoose');

    const ClearAdminSchema = new mongoose.Schema({
        email:
        {
            type:String,
            required:true,
            trim:true
        },
        password:{
            type:String,
            required:true
        },
        name:{
            type:String,
            required:true,
            trim:true

        },
        admintype:{
            type:String,
            type:String,
            enum :['HOD','CICT','Sports','SUASAB','Admin']
        },
        university:{
            type:String,
            default:"Sokoine University of Agriculture"
        },
        college:{
           type:String,
           required:true
        },
        department:{
            type:String,
            required:true
        }
    });

const ClearAdmin = mongoose.model('ClearAdmin', ClearAdminSchema);
module.exports = ClearAdmin;

输出没有导航到任何一个特定的路线，一切正常，但导航是问题所在，我的代码没有看到任何错误

标签： angular