Question

我已经使用Angular 6创建了一个前端，并且我想实现基于角色的授权，如何使用angular 6 node.js，passport来实现它，请使用其平均堆栈应用程序

这是我的auth.guard.ts

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

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



constructor(private userService:UserService,private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot):  boolean  {


if(!this.userService.isloggedIn()){
  this.router.navigateByUrl('/user');
  this.userService.deleteToken();
  return false;
}

    return true;
  }

}

这是我的user.model.ts

export class User {
    fullname:string;
    email:string;
    university:string;
    College:string;
    Department:string;
    password:string;
    admintype:string;

}

这是我的路线。

import { Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import { SignUpComponent } from './user/sign-up/sign-up.component';
import { SignInComponent } from './user/sign-in/sign-in.component';
import { AuthGuard } from './auth/auth.guard';
import { AdminComponent } from './user/admin/admin.component';
import { Role } from './shared/role';

export const appRoutes: Routes = [
    {
        path: 'user',component:SignInComponent
    },
    {
        path:'signup', component:SignUpComponent, canActivate:[AuthGuard]
    },
    {
        path:'admin', component:AdminComponent,
         canActivate:[AuthGuard]
    },
    {
        path: '',component:SignInComponent
    },
    {
        path:'',redirectTo:'/user', pathMatch:'full'
    }
];

这是我的猫鼬模型

 const mongoose = require('mongoose');
 const bcrypt = require('bcryptjs');
 const jwt = require('jsonwebtoken');

 const userSchema = new mongoose.Schema({
     fullname:{
         type:String,
         required:'Full name cant be empty',
         min:6,
         max:255
     },
     email:{
         type:String,
         required:'Email cant be Empty',
         max:255,
         unique:true
     },
     University:{
         type:String,
         default:"Sokoine University of Agriculture"
     },
     College:{
         type:String,
         required:'College cant be Empty'
     },

     Department:{
         type:String,
         required:'department cant be empty'
     },
     password:{
         type:String,
         required:'pasword cant be empty',
         max :1024,
         minlength: [6,'password must be atlest 6 character long']
     },
     admintype:{
        type:String,
        enum :['HOD','CICT','Sports','SUASAB','Admin']
    },
     date:{
type:Date,
default:Date.now
     },
     saltSecret:String
 });


 //custom validation
userSchema.path('email').validate((val) => {
    emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return emailRegex.test(val);
},'Invalid E-mail. ');




 //events
 userSchema.pre('save', function(next) {
     bcrypt.genSalt(10, (err, salt)=> {
         bcrypt.hash(this.password, salt, (err, hash) => {
             this.password = hash;
             this.saltSecret = salt;
             next();
         });
     });
 });

 //methods
 userSchema.methods.verifyPassword = function(password){
     return bcrypt.compareSync(password, this.password);
 };

 userSchema.methods.generateJwt = function() {
     return jwt.sign({ _id:this._id},
        process.env.JWT_SECRET,
        {expiresIn:process.env.JWT_EXP});
 }

 module.exports = mongoose.model('User',userSchema)

这是我的signin.component.ts

```import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserService } from 'src/app/shared/user.service';
import { Router } from '@angular/router';

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

  constructor( private userService:UserService, private router:Router) { }

  model = {
   email:'',
   password:''
  };

  emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/


  serverErrorMessages : string;
  ngOnInit() {
    if(this.userService.isloggedIn())
    {
      this.router.navigateByUrl('/admin');
    }
  }


  onSubmit(form :NgForm)
  {
   this.userService.login(form.value).subscribe( 
     res =>{
      this.userService.setToken(res['token']);
      this.router.navigateByUrl('/admin');
   },
   err =>{
     this.serverErrorMessages = err.message;

   });
  }
}```

这是我的角色。

```export enum Role {
    Admin = 'Admin',
    Cict = 'admincict',
    Sport = 'adminsport',
    SuaHub = 'adminsuahub'
}```

尝试了几次试听，但完全没有帮助

Answer 1

请参见stackblitz

中的示例

在您的app-routing.module.ts

const routes: Routes = [
   {
       path: "admin",
       component: AdminOnlyComponent,
       canActivate: [RoleGuardService],
       data: { roles: ['admin']}
   },
   ...
}

在您的RoleGuardService中

import { Injectable } from '@angular/core';
import { UserRolesService} from './user-roles.service';
import { Router, ActivatedRouteSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class RoleGuardService {

  constructor(private getUserRoles: UserRolesService) { }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    return route.data.roles.some( ai => this.getUserRoles.getRoles().includes(ai) );
  }
}

在UserRolesService中

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

@Injectable({
  providedIn: 'root'
})
export class UserRolesService {
   userRoles: string[] = [];

  constructor() { }

  setRoles(Roles: string[]){
    this.userRoles = Roles.slice(0);
  }

  getRoles(){
    return this.userRoles;
  }
}

在用户登录系统时设置角色，或从您的本地存储中获取这些角色。...

如何在角度6中实现角色重定向

1 个答案: