在我的 MEAN 堆棧應用程序中成功登錄后如何實現角色重定向

Question

我已經開發了一個 MEAN 堆棧應用程序，后端工作正常，前端但我想通過在登錄后實現基於角色的重定向來進一步 go 我有 5 個角色，即管理員、教師、護士、運動員和看門人，我希望他們每個人都能登錄成功后訪問他/她自己的頁面，並且應該使用相同的登錄頁面

我在網上嘗試了一些解決方案，但到目前為止沒有任何幫助

這是我的路線.ts

```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 { AdminSportComponent} from './user/admin-sport/admin-sport.component'
import {  AdminSuaHubComponent } from './user/admin-sua-hub/admin-sua-hub.component';
import { AdminCictComponent } from './user/admin-cict/admin-cict.component';
import { ViewadminsectionsComponent } from './user/viewadminsections/viewadminsections.component'
import { from } from 'rxjs';

export const appRoutes: Routes = [
    {
        path: 'user',component:SignInComponent
    },
    {
        path:'signup', component:SignUpComponent, canActivate:[AuthGuard]
    },
    {
        path:'admin', component:AdminComponent,
         canActivate:[AuthGuard],
         data:{
             roles:['admin']
         }
    },
    {
        path:'viewsectionadmins',
        component:ViewadminsectionsComponent,
        canActivate:[AuthGuard],
        data:{
            roles:['admin']
        }
    },
    {
      path:'admincict',
      component:AdminCictComponent,
      canActivate:[AuthGuard],
      data:{
       roles:['admincict']
      }
    },
    {
     path:'adminsport',
     component:AdminSportComponent,
     canActivate:[AuthGuard],
     data:{
         roles:['adminsport']
     }
    },
    {
   path:'adminsuahub',
   component: AdminSuaHubComponent,
   canActivate:[AuthGuard],
   data:{
       roles:['adminsuahub']
   }
    },
    {
        path: '',component:SignInComponent
    },
    {
        path:'',redirectTo:'/user', pathMatch:'full'
    }
];```

這是我的 app.module.ts

```import { BrowserModule } from '@angular/platform-browser';
import { NgModule, forwardRef } from '@angular/core';
import{ FormsModule } from '@angular/forms';
import{ RouterModule } from '@angular/router'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'

//components
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { SignUpComponent } from './user/sign-up/sign-up.component';
import { from } from 'rxjs';

//routes
import { appRoutes } from './routes';
import { SignInComponent } from './user/sign-in/sign-in.component';
import { UserService } from './shared/user.service';
import { AuthGuard } from './auth/auth.guard';
import { AuthInterceptor } from './auth/auth.interceptor';
import { AdminComponent } from './user/admin/admin.component';
import { AdminSportComponent } from './user/admin-sport/admin-sport.component';
import { AdminSuaHubComponent } from './user/admin-sua-hub/admin-sua-hub.component';
import { AdminCictComponent } from './user/admin-cict/admin-cict.component';
import { ViewadminsectionsComponent } from './user/viewadminsections/viewadminsections.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    SignUpComponent,
    SignInComponent,
    AdminComponent,
    AdminSportComponent,
    AdminSuaHubComponent,
    AdminCictComponent,
    ViewadminsectionsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [{
    provide:forwardRef(() => {HTTP_INTERCEPTORS}),
    useClass:forwardRef(() =>{ AuthInterceptor}),
    multi:true
  },AuthGuard,UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }```

這是我的 User.js

``` 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)```

這是我的用戶。controller.js

```const mongoose = require('mongoose');
const User = mongoose.model('User');
const passport = require('passport');
const _ = require('lodash');


module.exports.register = (req,res, next) => {

    const user = new User();
    user.fullname = req.body.fullname;
    user.email = req.body.email;
    user.College = req.body.College;
    user.Department = req.body.Department;
    user.password = req.body.password;
    user.admintype = req.body.admintype;
    user.save((err, doc) => {
        if(!err) { res.send(doc)}


        else
        {
            if(err.code == 11000)
            res.status(422).send(['Duplicate email Address Found.'])
            else
            return next(err);
        }
    }) 
}

module.exports.authenticate = (req, res, next ) => {
    //calll for passport authentication
    passport.authenticate('local', (err, user, info) => {
        //error form paasport middleware
        if(err) return res.status(400).json(err);
        //registered user
        else if (user) return res.status(200).json({ "token":user.generateJwt() });
        //unknown user or wrong password
        else return res.status(404).json(info);
    })(req, res);
}

module.exports.userProfile = (req, res, next) =>{
    User.findOne({ _id:req._id},
         (err,user) =>{
             if(!user)
             return res.status(404).json({ status: false, message : 'User Record not Found. '});
             else
             return res.status(200).json({  status:true , user : _.pick(user, ['fullname','email','university','College','Department','admintype'])});
         } );


         //get admins


}```

這是我的 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;
  }

}```

這是我的用戶。model.ts

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

}```

這是我的 user.service.ts

```import { Injectable } from '@angular/core';
import { User } from './user.model';
import{ HttpClient, HttpHeaders } from '@angular/common/http';
import{ environment } from '../../environments/environment';
import { from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  selectedUser: User = {
    fullname:'',
    email:'',
    university:'',
    College:'',
    Department:'',
    password:'',
    admintype:''
  }

  noAuthHeader = { headers: new HttpHeaders({ 'NoAuth': 'True'})};

  constructor(private http: HttpClient) { }


  //http methods
  postUser(user:User)
  {
    return this.http.post(environment.apiBaseUrl+ '/register' ,user)
  }

  login(authCredentials)
  {
    return this.http.post(environment.apiBaseUrl+ '/authenticate',authCredentials,this.noAuthHeader);
  }

  getUserProfile()
  {
    return this.http.get(environment.apiBaseUrl + '/userProfile');
  }


  //helper methods
  setToken(token:string)
  {
    localStorage.setItem('token',token);
  }

  getToken()
  {
    localStorage.getItem('token');
  }

  deleteToken()
  {
    localStorage.removeItem('token');
  }

  getUserPayload(){
    var token = localStorage.getItem('token');
    if(token)
    {
      var userPayload = atob(token.split('.')[1]);
      return JSON.parse(userPayload);
    }
    else
    return null;
  }

  isloggedIn()
  {
    var userPayload = this.getUserPayload();
    if (userPayload)
    {
      return userPayload.exp > Date.now() / 1000;
    }
  }


  getUserRole()
  {

  }

}```

這是我的登錄.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;

   });
  }
}```

到目前為止，我沒有錯誤，但需要實現基於角色的重定向

Answer 1

我建議您以管理員身份在 mongodb 架構中創建一個字段，並將 boolean 值設置為 true 或 false，具體取決於用戶，如果存在任何其他角色，請添加不同的字段，

登錄時檢查用戶管理員狀態，並通過訂閱服務文件中的可觀察對象通知應用程序的其他部分

在組件的 OnInit 方法上調用服務文件中的方法並檢查用戶是否為管理員，如果不是管理員，則隱藏您不想顯示的內容

並阻止用戶轉到用於管理員的路由，添加一個守衛，如果他不是管理員，則通過檢查您在服務文件中創建的相同可觀察對象將用戶導航到主頁。

我希望它有幫助