Vì vậy, tôi đã phải thực hiện một cái gì đó như thế này trên một ứng dụng tôi đã làm việc ra, đây là cách tôi xử lý nó.
Tôi tạo ra một dịch vụ auth, này chứa một phương pháp mà kiểm tra là người dùng đã có một vai trò quản lý:
auth.service.ts
public isManager(): boolean {
let isManager = false;
let user = this.getUserToken();
//Stored my allowed groups in a config file, comma separated string
let allowedGroups = AuthenticationParams.filters.split(',');
let userGroups: any;
if (user !== null && user !== undefined) {
try {
let userGroups: any = user.role;
if (userGroups !== undefined && userGroups !== null && userGroups.length > 0) {
try {
userGroups.forEach((e: any) => {
if (allowedGroups.indexOf(e) > -1) {
isManager = true;
}
});
} catch (e) {
if (allowedGroups.indexOf(userGroups) > -1) {
isManager = true;
}
}
}
} catch (e) {
isManager = false;
}
}
return isManager;
}
public getUserToken(): any {
return localStorage.getItem('jwtTokenName');
}
Tôi tạo ra một bảo vệ auth như sau:
guard.component.ts
import { Injectable, OnInit } from '@angular/core';
import { CanActivate, CanActivateChild } from '@angular/router';
import { Router } from '@angular/router';
import { AuthenticationService } from '../services/helper/security/auth.service';
@Injectable()
export class GuardComponent implements CanActivate {
constructor(private authenticationService: AuthenticationService, private _router: Router) {
}
canActivate() {
let isManager: boolean = this.authenticationService.isManager();
if (!isManager) {
this._router.navigate(['unauthorized']);
}
return isManager;
}
}
guard.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuardComponent } from './guard.component';
@NgModule({
declarations: [],
imports: [ CommonModule ],
exports: [],
providers: [ GuardComponent ],
})
export class GuardModule { }
sau đó tôi sử dụng bảo vệ cho tuyến đường của tôi để xử lý chuyển hướng đến phần admin
app-routing.module.ts
{ path: 'management', component: AdminComponent, canActivate: [GuardComponent] }
Trên thanh điều hướng của tôi, tôi chỉ cần gọi phương thức isManager và được lưu trữ trên một biến và sử dụng để xác định wheth er hay không liên kết quản lý cần phải được hiển thị hay không.
navbar.component.ts
public isManager: boolean = false;
ngOnInit(): void {
this.isManager = this.authenticationService.isManager();
}
navbar.component.html
<li [routerLinkActive]="['active']" *ngIf="isManager"><a [routerLink]="['management']">Management Portal</a></li>
Tôi đã có để loại bỏ một số dữ liệu từ mỗi phương pháp, nhưng điều này sẽ cung cấp cho bạn ý kiến cơ bản. Hy vọng rằng điều này sẽ giúp.
Câu hỏi này quá rộng đối với định dạng Q/A của SO. Có toàn bộ các chương sách được viết bao gồm cách giải quyết những vấn đề này. Trong ngắn hạn: các tuyến đường, bảo vệ auth, và các mô-đun. – axlj
@axlj vâng tôi hiểu điều đó.Và bạn nói đúng. Nhưng làm thế nào bạn biết rất nhiều người không thích đọc sách bây giờ. Và nhiều người có ý tưởng tốt về một số câu hỏi sẽ không bao giờ viết một cuốn sách về nó. Nhưng có lẽ nếu tất cả những người này viết một số câu trả lời nhỏ thì chúng ta sẽ có một nơi mà những người không thích đọc một cuốn sách có thể đọc về điều này. Và thêm một cái gì đó của riêng mình :) –
Tôi nghe bạn, và tôi thích tạo ra hơn đọc sách dài là tốt. Thật không may, một câu trả lời hoàn chỉnh cho câu hỏi cụ thể này sẽ mang lại điều đó! – axlj