Preface

Problem

After the acl parameter is added to the custom button group in the st component, the role will be reset for the first entry and refresh. The reason is that the can() is used to print out false, and the switch route reloads the page to print true, which can display normally. The problem is that there is no way to make the first entry and every refresh display normal.
(acl parameters are also added to the menu data in app-data.json, and the startup.service.ts file has set roles, but no permission points for granularity control are used, all of which are controlled through roles.)

Code display

Parameters of custom button group of st component in API document

Set acl parameter of button group in page

 

The role is set in the startup file. At the beginning, setRole() is used. I'm afraid that the problem of clearing all roles in each assignment of this function causes the problem of changing to attachRole() to be solved

Console debugging, red box is the output of can() function in ngOnInit in the page

Effect display

With the right logic, entering the widget page should look like this

However, due to the asynchronous role setting, the page refreshed and displayed for the first time is as follows

Then switch the route and then switch back to reload the page. The page displays normally again

Solve the problem

Reason

In the process of writing demo, we found the cause of this problem

The reason is that my original user rights are obtained through asynchronous requests. In the process of writing the demo, I used settimeout instead of asynchronous requests. After commenting settimeout in the demo, I found that the problem was solved

Original file:

demo file:

Solution

Get the permission variable in advance and store it in localstorage, and get setRole() at startup, so there is no asynchronous problem.

Add the local.storage.ts file to src/app/core/net (the path can be set according to your preference)

// local.storage.ts file contents
import { Provider } from '@angular/core';
export class LocalStorage {
  public localStorage: any;

  constructor() {
    if (!localStorage) {
      throw new Error('Current browser does not support Local Storage');
    }
    this.localStorage = localStorage;
  }

  public set(key: string, value: string): void {
    this.localStorage[key] = value;
  }

  public get(key: string): string {
    return this.localStorage[key] || false;
  }

  public setObject(key: string, value: any): void {
    this.localStorage[key] = JSON.stringify(value);
  }

  public getObject(key: string): any {
    return JSON.parse(this.localStorage[key] || '{}');
  }

  public remove(key: string): any {
    this.localStorage.removeItem(key);
  }
}

Introduce in app.module.ts

login.component.ts file:

// Add content to login.component.ts file

// ...
import { LocalStorage } from '@core/net/local.storage';

// ...

export class UserLoginComponent implements OnDestroy {

  constructor(
    private localStorage: LocalStorage, // Introducing localstorage
  ) {
    // Clear roles every time you enter the landing page
    this.localStorage.remove('role');
  }

  submit() {

    // ...

    this.api
      .loginCheck({
        username: this.userName.value,
        password: this.password.value,
      })
      .subscribe((res: any) => {

        // ...

        // Set user Token information
        this.tokenService.set({ token: res.data.token });
        this.api.findUserRights().subscribe(
          resp => {
            // Save role permissions obtained asynchronously
            this.localStorage.set('role', resp.data.acl);
          },
          () => null,
          () => {
            // Function after execution

            // To retrieve the startups service content, we always believe that the application information is generally affected by the authorization scope of the current user
            this.startupSrv.load().then(() => {
              let url = this.tokenService.referrer.url || '/';
              if (url.includes('/passport')) url = '/';
              this.router.navigateByUrl(url);
            });
          },
        );
      });
  }
}

startup.service.ts file:

Write at the end