AuthGuard 安全性未按预期工作

问题描述

在 Angular 中，我已经实现了 JWT 身份验证。 在尝试为基于角色的身份验证实现 AuthGuard 安全性时，它不起作用

这是我的代码..

Auth.guard.ts

import { Injectable } from '@angular/core';
import { Router,CanActivate,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { User } from '../data/schema/user';
import { TokenStorageService } from '../data/service/token-storage.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
    private userSubject: BehaviorSubject<User>;
    constructor(
        private router: Router,private tokenStorageService: TokenStorageService
    ) { }

    canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {
        console.log("Access token in auth gaurd",this.tokenStorageService.getToken())
        const user = this.tokenStorageService.getUser();
        console.log("Auth gaurd user is "+user.roles);
        if (user) {
            // check if route is restricted by role
           console.log("Authgaurd route route is ",route.data.roles,route.data.roles.indexOf(user.role) )
            if (route.data.roles && route.data.roles.indexOf(user.role) === -1) {
                // role not authorised so redirect to home page
                this.router.navigate(['/']);
                return false;
            }

            // authorised so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url } });
        return false;
    }
}

TokenStorageService.ts

import { Injectable } from '@angular/core';

const TOKEN_KEY = 'auth-token';
const USER_KEY = 'auth-user';

@Injectable({
  providedIn: 'root'
})
export class TokenStorageService {

  private roles: string[] = [];
  isLoggedIn = false;
  isAdmin = false;
  constructor() { }

  

  public savetoken(token: string): void {
    window.sessionStorage.removeItem(TOKEN_KEY);
    window.sessionStorage.setItem(TOKEN_KEY,token);
  }

  public getToken(): string | null {
    return window.sessionStorage.getItem(TOKEN_KEY);
  }

  public saveUser(user: any): void {
    window.sessionStorage.removeItem(USER_KEY);
    window.sessionStorage.setItem(USER_KEY,JSON.stringify(user));
  }

  public getUser(): any {
    const user = window.sessionStorage.getItem(USER_KEY);
    if (user) {
      return JSON.parse(user);
    }

    return {};
  }
   

  isUserLoggedIn() { 
    return !(this.getUser() === null)
  }

 
  signOut(): void {
    window.sessionStorage.clear();
  }
}

The image of values I am printing from AuthGuard.ts

这是我的架构代码..

用户.ts

export class User {
    id: number;
    username: string;
    password: string;
    email:string;
    firstName: string;
    lastName: string;
    created_date: Date;
}

角色.ts

import { ERole } from "./ERole";

export class Role {
    userid: number;
    roleid:number
    
}

ERole.ts

export enum ERole {
    user = 'ROLE_USER',//1
    mod='ROLE_MODERATOR',//2
    admin = 'ROLE_ADMIN'//3
   
    
}

在sql中我有角色和用户之间的妈妈对妈妈的关系

因此用户和角色具有在架构中定义的列，而 erole 表具有列角色 ID 和角色名称。

这是如何在组件中应用 AuthGuard..

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { ERole } from 'src/app/data/schema/ERole';
import { AuthGuard } from 'src/app/helpers/auth.gaurd';
import { CreateProjectCategoryComponent } from './create-project-category.component';

const routes: Routes = [{ path: 'admin/projectCategory/create',component: CreateProjectCategoryComponent,canActivate: [AuthGuard],data: { roles: [ERole.admin]}
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class CreateProjectCategoryRoutingModule { }

当我点击导航链接时..没有任何反应

请告诉我哪里做错了，我在角度方面很新。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）