关于Ng-alain的Acl的使用

前言

近来使用angular总是做后台系统，找了很久找到Ng Alain这个框架，用的还蛮顺手。就是官方文档略微简洁了点，用的过程中得不断结合一些小例子和官方demo来确定使用语法。之前的使用还一直挺顺利，哪怕有点问题网上也能找到相关问题的博客或者资料；但是这两天使用到访问控制列表遇到了点问题，拖了点时间几经波折后才解决，虽然是框架之外的原因，但是想以此为契机，写下第一篇博客好了。（之前也会有开发的笔记，然而每次遇到都记在有道云里面实在是很顺手，周末闲暇也没有意识整理出来，其实就是懒好了= = ；在后面也一起整理贴出来吧~ 立个小flag~）

问题 

在st组件中的自定义button组中添加了acl参数后，第一次进入和刷新都会将角色重置，判断原因是使用can()打印出来为false，切换路由重新加载页面后为打印为true，能正常显示。问题就是没有找到办法让第一次进入和每次刷新都正常显示。
（app-data.json中的菜单数据也添加了acl的参数，并且startup.service.ts文件有设置角色，但是没有使用到粒度控制的权限点，全部都是通过角色来控制权限）

代码展示

API文档中st组件的自定义button组的参数

页面中设置button组的acl参数

 

startup文件中设置角色，一开始使用setRole()，担心是这个函数每次赋值清空所有角色的问题导致换成了attachRole()也没有解决

控制台调试情况，红框为页面中ngOnInit中can()函数的输出情况

效果展示

按正确逻辑来说，进入小部件页面应该如下

但是由于异步设置角色的原因，导致刷新和首次显示的页面如下

然后切换路由后切换回来让这个页面重新加载，页面又正常显示了

解决问题

原因

在写demo的过程中，发现了造成这个问题的原因

原因是我原先的用户权限是通过异步请求获取的，在写demo的过程中我用settimeout代替了异步请求，在demo中将settimeout注释后发现问题就解决了

原来的文件：

demo文件：

解决方案

提前将权限变量获取存入localstorage，在startup的时候获取setRole()，这样没有异步就没有这个问题了。

在src/app/core/net中添加local.storage.ts文件（路径可凭自己喜好设置）

// local.storage.ts 文件内容
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);
  }
}

在app.module.ts中引入

login.component.ts文件：

// login.component.ts 文件添加内容

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

// ...

export class UserLoginComponent implements OnDestroy {

  constructor(
    private localStorage: LocalStorage, // 引入localstorage
  ) {
    // 每次进入登陆页清空角色
    this.localStorage.remove('role');
  }

  submit() {

    // ...

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

        // ...

        // 设置用户Token信息
        this.tokenService.set({ token: res.data.token });
        this.api.findUserRights().subscribe(
          resp => {
            // 保存异步获取的角色权限
            this.localStorage.set('role', resp.data.acl);
          },
          () => null,
          () => {
            // 执行完成后调用的函数

            // 重新获取 StartupService 内容，我们始终认为应用信息一般都会受当前用户授权范围而影响
            this.startupSrv.load().then(() => {
              let url = this.tokenService.referrer.url || '/';
              if (url.includes('/passport')) url = '/';
              this.router.navigateByUrl(url);
            });
          },
        );
      });
  }
}

startup.service.ts文件：

写在最后 

这样是解决了异步的问题，但是总觉得可能不是最好的解决办法。有几个问题我暂时也没有找到答案：aclservice 中设置的变量是保存在哪里的呢？alain里面是否本来就有它不需要我另外保存在localstorage的写法？

写demo发现原因的起因是由于我这个问题拖了两三天，百度查资料都没有找到问题，无奈下只能发邮件询问Ng Alain的开发者卡色（GitHub上留的邮箱）。在此之前我确实有考虑到可能是异步的原因，将这个异步请求await变成同步了后发现页面渲染先于startup文件的执行，而且问题也没解决，下意识就以为不是异步的问题就排除了。然后，想着的排除异步请求写死参数的debug测试也因为这样那样的问题没有进行，这是我第一次写邮件询问作者，打扰大神真的是不好意思。。。