关于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测试也因为这样那样的问题没有进行,这是我第一次写邮件询问作者,打扰大神真的是不好意思。。。
关于Ng-alain的Acl的使用相关推荐
- angular项目 集成ng zorro 和ng alain
angular项目 集成 ng zorro和ng alain(mock 和acl权限)学习笔记 这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
- Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍 参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
- angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- ng-alain php,Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- ng alain的简单使用
1.创建一个空 angular 项目 ng new demo --style less 2.添加 ng-alain 脚手架 ng add ng-alain 3.运行项目 ng serve -o ...
- angularjs html编辑器,AngularJS集成wangeditor富文本编辑器
最近用AngularJS2(ng alain)搭建的项目需求中须要富文本,在网上找了不少,要么过重,要么没有详细的集成步骤.css 下面将我本身如何将wangeditor集成在项目(项目名称myPro ...
- .Net Core应用框架Util介绍(二)
Util的开源地址 https://github.com/dotnetcore/util Util的开源协议 Util以MIT协议开源,这是目前最宽松的开源协议,你不仅可以用于商业项目,还能把Util ...
- [Angular]——快速创建框架模板
Angular搭建模板框架 前言:网络不好,可以使用国内淘宝镜像.本模板的脚手架使用Ng Alain,本地环境需要安装 node 和 git.技术栈基于 Typescript.Angular.g2.@ ...
- (非常重要).Net Core应用框架Util介绍(学习Util)
转载地址https://blog.csdn.net/sD7O95O/article/details/82598545(看看!) 不过Util作者本人的博客地址在https://www.cnblogs. ...
最新文章
- php swoole process,Swoole_process实现进程池的方法
- tornado异步请求非阻塞
- C#下的Web应用程序设计过程
- yum搭建本地仓库、国内源、下载rpm包、源码安装
- Web service 超过了最大请求长度错误解决
- vue项目的骨架及常用组件介绍
- git 修改远程仓库地址
- python 函数参数的传递(参数带星号的说明) 元组传递 字典传递
- linux三种连接方式
- python request发送用户名密码_Python3 利用requests 库进行post携带账号密码请求数据的方法...
- caffe matlab 崩溃,终于搞定caffe了(window官方版win7+VS2013)
- 【零售知识】商品库存成本计算的几种方式
- 基于JAVA医院预约挂号系统设计与实现 开题报告
- 机器学习算法各个击破
- datetimepicker 插件用法及参数说明
- 如何投资股票型基金?什么时间买?买什么?
- 小灰整理了一套Java学习路线图,面试和实战都能用得上!
- 收款凭证 付款凭证 记账凭证的区别
- Stay foolish stay hungry
- LED圆柱屏、波浪屏、飘带屏等异形屏是由柔性软模组构成的创意LED显示屏