Question

我正在开发基于角色的权限，现在我需要在标题上显示链接，并且该链接来自数据库。

登录后，我需要刷新页面以显示动态链接。

我已经使用ngx-permission并加载了权限数组并检查了权限。

header.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { LoginService } from '../login.service';
import { Router } from '@angular/router';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  permissionData = null
  permissionModule = null
  useremail = null
  perm = [];

  constructor(
    private loginApi: LoginService,
    private permissionsService: NgxPermissionsService,
    private http: HttpClient,
    private router: Router,
  ) {
    console.log("Header constuctor")
  }

  ngOnInit() {
    console.log('Header initialized')
    this.useremail = localStorage.getItem('useremail')
    this.perm.push(this.useremail)
    // console.log("User Email", this.useremail)
    this.checkUserPermissions()
  }

  logout() {
    this.loginApi.logout()
    this.router.navigate(['/login'])
  }

  checkUserPermissions() {
    let userID = localStorage.getItem('userid')
    if (userID) {
      this.loginApi.getAuthenticatedUserPermissions(userID).subscribe(res => {
        this.permissionModule = Object.keys(res[0].permissions[0])
        this.permissionData = res
        // ngx permission
        const perm = [];
        perm.push(this.permissionModule)
        this.permissionsService.loadPermissions(perm)
      }, error => {
        console.log(error)
      })
    }
  }

}

header.component.html

<div *ngIf="permissionModule?.length">
        <div *ngxPermissionsOnly="dashboard">
          <a routerLink="/barcharts">Dashboard</a>
        </div>
        <div *ngxPermissionsOnly="product management">
          <a routerLink="/productmanagement">Product Management</a>
        </div>
        <div *ngxPermissionsOnly="app userlisting">
          <a routerLink="/appuserlisting_new">App User Listing</a>
        </div>
      </div>

Answer 1

我认为这可行。您可以使用 BehaviorSubject 在整个应用程序的不同组件之间进行通信。您可以定义包含 BehaviorSubject 的数据共享服务，您可以订阅并发出更改。

定义数据共享服务

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

@Injectable()
export class DataSharingService {
    public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}

在您的 DataSharingService 提供者条目中添加 AppModule 。

接下来，将DataSharingService导入<app-header>以及执行登录操作的组件中。在<app-header>中，订阅对isUserLoggedIn主题的更改：

import { DataSharingService } from './data-sharing.service';

export class AppHeaderComponent { 
    // Define a variable to use for showing/hiding the Login button
    isUserLoggedIn: boolean;

    constructor(private dataSharingService: DataSharingService) {

        // Subscribe here, this will automatically update 
        // "isUserLoggedIn" whenever a change to the subject is made.
        this.dataSharingService.isUserLoggedIn.subscribe( value => {
            this.isUserLoggedIn = value;
        });
    }
}

在您的<app-header> html模板中，您需要添加*ngIf条件，例如：

<button *ngIf="!isUserLoggedIn">Login</button> 
<button *ngIf="isUserLoggedIn">Sign Out</button>

最后，您只需要在用户登录后发出事件，例如：

someMethodThatPerformsUserLogin() {
    // Some code 
    // .....
    // After the user has logged in, emit the behavior subject changes.
    this.dataSharingService.isUserLoggedIn.next(true);
}

动态标题链接无法正常工作，需要刷新角度7

1 个答案: