前言
近来使用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测试也因为这样那样的问题没有进行,这是我第一次写邮件询问作者,打扰大神真的是不好意思。。。