"Our goal with Angular 2 is to make the best possible set of tools for
building web apps not constrained by maintaining backwards compatibility
with existing APIs." —Angular blog
Expert — Angular has brilliant parts and it is possible to create awesome web apps with Angular, but it just isn’t worth the trouble. I am going to use [React|Ember] instead.
نظرات مطالب
احراز هویت و اعتبارسنجی کاربران در برنامه‌های Angular - قسمت اول - معرفی و ایجاد ساختار برنامه
یک نکته‌ی تکمیلی
اگر NET Core 3 SDK. را نصب کنید، امکان ایجاد یک برنامه‌ی Angular مبتنی بر Microsoft.AspNetCore.ApiAuthorization.IdentityServer به قالب‌های پیش‌فرض آن اضافه شده‌است. روش ایجاد آن توسط دستورات CLI به صورت زیر است:
dotnet new angular --auth Individual
همین مورد برای برنامه‌های React نیز پیش بینی شده‌است:
dotnet new react --auth Individual //or dotnet new reactredux --auth Individual
- «Organizing Angular applications»
- یک نمونه‌اش در سری «احراز هویت و اعتبارسنجی کاربران در برنامه‌های Angular» بحث شده‌است؛ با این کدها.
- یک نمونه‌اش در سری «احراز هویت و اعتبارسنجی کاربران در برنامه‌های Angular» بحث شده‌است؛ با این کدها.
├───authentication │ ├───access-denied │ └───login ├───core │ ├───component │ │ └───header │ ├───models │ └───services ├───dashboard │ ├───call-protected-api │ └───protected-page ├───page-not-found ├───shared │ └───directives └───welcome
- این مورد انتخاب شخصی است بیشتر. اگر می‌خواهید یکی را با VSCode کار کنید و دیگری را با VS کامل، شاید جدا باشند بهتر باشد. یا اینکه هر دو را هم می‌توان با VSCode کار کرد (اگر NET Core. کار می‌کنید).
- بستگی به توزیع نهایی برنامه دارد. آیا قرار است برنامه‌ی Angular بر روی یک پورت دیگر و یا یک دومین دیگر به صورت مجزایی ارائه شود؟ بله. در این‌حالت باید CORS فعال شود (یک مثال فعالسازی آن). در غیراینصورت اگر فایل‌های نهایی Angular در پوشه‌ی wwwroot برنامه‌ی وب کپی می‌شوند، نیازی به تغییر اضافه‌تری نیست.
- بستگی به توزیع نهایی برنامه دارد. آیا قرار است برنامه‌ی Angular بر روی یک پورت دیگر و یا یک دومین دیگر به صورت مجزایی ارائه شود؟ بله. در این‌حالت باید CORS فعال شود (یک مثال فعالسازی آن). در غیراینصورت اگر فایل‌های نهایی Angular در پوشه‌ی wwwroot برنامه‌ی وب کپی می‌شوند، نیازی به تغییر اضافه‌تری نیست.
با سلام و تشکر
من طبق این آموزش تنظیمات webpack را در پروژه ام انجام داده ام. از angular2 rc5 استفاده کرده ام. آخرین ورژن nodejs (v6.7.0) و typescript(2.0.3 ) نصب کردم
فایل package.json به صورت زیر میباشد
ولی با اجرای کدnpm run serve با خطای زیر مواجه میشوم
با توجه به خطای connect ECONNREFUSED 10.10.34.36:443 که در زمان ذخیره package.json به دلیل وجود typings install رخ میداد از vpn استفاده کردم و ذخیره فایل درست انجام شد ولی بازهم با اجرای npm run serve خطای بالا رخ میدهد.
فایل package.json به صورت زیر میباشد
{
"name": "mainmodule",
"version": "1.0.0",
"scripts": {
"build": "webpack --progress",
"build:prod": "webpack -p --progress",
"serve": "webpack-dev-server --inline --progress ",
"postinstall": "typings install"
},
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"typings": "^1.4.0",
"zone.js": "^0.6.12"
},
"devDependencies": {
"html-webpack-plugin": "^2.22.0",
"ts-loader": "^0.9.0",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
}
} 
با توجه به خطای connect ECONNREFUSED 10.10.34.36:443 که در زمان ذخیره package.json به دلیل وجود typings install رخ میداد از vpn استفاده کردم و ذخیره فایل درست انجام شد ولی بازهم با اجرای npm run serve خطای بالا رخ میدهد.
به نظرم در کنار ایراد هایی که به Angular وارد می‌شود در حال حاضر کامل‌ترین فریم ورک به همراه مستندات فراوان است . اگر بخواهیم فریم ورک دیگری انتخاب کنیم گزینه‌های موجود یا Emberjs است یا Backbone یا Reactjs که آخری صرفا یک View Layer در مدل MVC محسوب می‌شود . Emberjs هم در ورژن 2 تغییرات زیادی دارد . وقتی همه این موارد را به شخصه کنار هم می‌گذارم گزینه ای غیر از Angular وجود ندارد شاید بعد از آمدن ورژن 2 انگولار و emberjs بتوان بهتر تصمیم گیری کرد .
برخلاف AngularJS، در برنامه‌های Angular امکانات two way data binding به صورت پیش‌فرض ارائه نمی‌شوند تا از تمام مشکلات آن مانند digest cycle ،watchers و غیره خبری نباشد. اما گاهی از اوقات نیاز است انقیاد دو طرفه‌ی سفارشی را بین دو کامپوننت ایجاد کنیم. در این مطلب روش ایجاد یک چنین انقیادهایی را بررسی خواهیم کرد و در اینجا در ابتدا نیاز است دو پیشنیاز Property Binding و Event Binding را بررسی کنیم که از جمع آنها two way data binding حاصل می‌شود:
البته Angular به همراه دایرکتیو ویژه‌ای به نام ngModel است که two-way data binding را با import ماژول ویژه‌ی فرم‌ها میسر می‌کند:
که آن نیز در اصل از جمع Property Binding و Event Binding تشکیل شده‌است:
و یا به صورت خلاصه:
در اینجا می‌خواهیم یک چنین امکانی را بدون استفاده از ngModel و ماژول فرم‌ها پیاده سازی کنیم.
انقیاد به خواص یا Property binding
فرض کنید دو کامپوننت والد و فرزند را ایجاد کرده‌ایم:
در کامپوننت والد، مقداری را توسط متد deposit هربار 100 آیتم افزایش می‌دهیم:
با این قالب:
که در آن مقدار amount کامپوننت والد نمایش داده شده‌است و همچنین این مقدار به خاصیت ورودی کامپوننتی به نام app-child نیز نسبت داده شده‌است.
کامپوننت فرزند به صورت ذیل تعریف می‌شود:
که در آن خاصیت amount، از والد آن، توسط ویژگی Input دریافت می‌شود. سپس در متد withdraw هربار می‌توان 100 آیتم را از آن کسر کرد.
با این قالب:
که در آن مقدار amount فرزند نمایش داده شده‌است و همچنین امکان فراخوانی متد withdraw وجود دارد.
در اینجا زمانیکه data binding را به صورت ذیل تعریف می‌کنیم:
روش مقدار دهی خاصیت amount داخل [] ، انقیاد به خواص نامیده می‌شود و سمت راست آن نیز یک خاصیت درنظر گرفته می‌شود. یعنی مقدار خاصیت amount والد (درون "") به مقدار خاصیت amount فرزند (درون []) نسبت داده خواهد شد.
این ارتباط نیز یک طرفه‌است. برای مثال اگر بر روی دکمه‌ی Deposit والد کلیک کنیم:
مقدار افزایش یافته‌ی در والد، به فرزند نیز منتقل می‌شود و نمایش داده خواهد شد. اما اگر بر روی دکمه‌ی withdraw فرزند کلیک کنیم:
تغییر صورت گرفته، به والد انعکاس پیدا نمی‌کند. برای اطلاع رسانی به والد، به انقیاد به رخ‌دادها نیاز داریم.
انقیاد به رخ‌دادها یا Event binding
یک کامپوننت می‌تواند به رخ‌دادهای صادر شده‌ی توسط کامپوننتی دیگر گوش فرا دهد:
برای این منظور در کامپوننت فرزند، یک خاصیت Output را به نام amountChange از نوع EventEmitter تعریف می‌کنیم. سپس جایی که قرار است کار کاهش amount صورت گیرد، با صدور رخ‌دادی (this.amountChange.emit)، این مقدار را به والد اعلام می‌کنیم.
اکنون در قالب کامپوننت والد، این رخ‌داد را درون یک () معرفی خواهیم کرد:
به این ترتیب زمانیکه کامپوننت فرزند، مقدار amount را تغییر میدهد، این مقدار توسط this.amountChange.emit به والد منتشر خواهد شد و می‌توان در سمت والد توسط event$ به آن دسترسی یافته و آن‌را به خاصیت this.amount کامپوننت والد نسبت دهیم.
اکنون اگر برنامه را آزمایش کنیم، با کلیک بر روی دکمه‌ی withdraw فرزند، مقدار کاهش یافته به والد نیز منعکس می‌شود:
پیاده سازی syntax ویژه‌ی Banana in a box
تا اینجا پیاده سازی two way data-binding سفارشی به پایان می‌رسد. اما تعریف طولانی:
به صورت ذیل هم قابل نوشتن و ساده سازی است:
که به آن syntax ویژه Banana in a box نیز گفته می‌شود.
نکته‌ی ویژه‌ی آن، وجود پسوند Change در نام رخ‌داد تعریف شده‌است:
اگر نام خاصیت Input مساوی x باشد، باید جهت فعالسازی syntax ویژه Banana in a box، نام رخ‌داد متناظر با آن دقیقا مساوی xChange انتخاب شود. مانند amount ورودی در اینجا و amountChange خروجی تعریف شده.
بنابراین به صورت خلاصه جهت تعریف یک انقیاد دو طرفه سفارشی:
- ابتدا باید انقیاد به یک خاصیت ورودی x را تعریف کرد.
- سپس نیاز است انقیاد به یک رخ‌داد خروجی هم‌نام، که نام آن، پسوند Change را اضافه‌تر دارد، یعنی xChange را تعریف کرد.
- اکنون می‌توان two-way data binding syntax ویژه‌ای را به نام banana in a box بر روی این‌دو تعریف کرد[(x)].
کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید.
البته Angular به همراه دایرکتیو ویژه‌ای به نام ngModel است که two-way data binding را با import ماژول ویژه‌ی فرم‌ها میسر می‌کند:
که آن نیز در اصل از جمع Property Binding و Event Binding تشکیل شده‌است:
<input [ngModel]="username" (ngModelChange)="username = $event">
<input [(ngModel)]='username' />
انقیاد به خواص یا Property binding
فرض کنید دو کامپوننت والد و فرزند را ایجاد کرده‌ایم:
در کامپوننت والد، مقداری را توسط متد deposit هربار 100 آیتم افزایش می‌دهیم:
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-parent",
templateUrl: "./parent.component.html",
styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
amount = 500;
constructor() { }
ngOnInit() {
}
deposit() {
this.amount += 100;
}
} <h2>Custom two way data binding</h2>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Parnet Component</h2>
</div>
<div class="panel-body">
<label>Available amount:</label> {{amount}}
<button (click)="deposit()" class="btn btn-success">Deposit 100</button>
<div>
<app-child [amount]="amount"> </app-child>
</div>
</div>
</div> کامپوننت فرزند به صورت ذیل تعریف می‌شود:
import { Component, OnInit, Input } from "@angular/core";
@Component({
selector: "app-child",
templateUrl: "./child.component.html",
styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
@Input() amount: number;
constructor() { }
ngOnInit() {
}
withdraw() {
this.amount -= 100;
}
} با این قالب:
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Child Component</h2>
</div>
<div class="panel-body">
<label>Amount available: </label> {{amount}}
<button (click)="withdraw()" class="btn btn-danger">Withdraw 100</button>
</div>
</div> در اینجا زمانیکه data binding را به صورت ذیل تعریف می‌کنیم:
<app-child [amount]="amount"> </app-child>
این ارتباط نیز یک طرفه‌است. برای مثال اگر بر روی دکمه‌ی Deposit والد کلیک کنیم:
مقدار افزایش یافته‌ی در والد، به فرزند نیز منتقل می‌شود و نمایش داده خواهد شد. اما اگر بر روی دکمه‌ی withdraw فرزند کلیک کنیم:
تغییر صورت گرفته، به والد انعکاس پیدا نمی‌کند. برای اطلاع رسانی به والد، به انقیاد به رخ‌دادها نیاز داریم.
انقیاد به رخ‌دادها یا Event binding
یک کامپوننت می‌تواند به رخ‌دادهای صادر شده‌ی توسط کامپوننتی دیگر گوش فرا دهد:
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-child",
templateUrl: "./child.component.html",
styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
@Input() amount: number;
@Output() amountChange = new EventEmitter();
constructor() { }
ngOnInit() {
}
withdraw() {
this.amount -= 100;
this.amountChange.emit(this.amount);
}
} اکنون در قالب کامپوننت والد، این رخ‌داد را درون یک () معرفی خواهیم کرد:
<app-child [amount]="amount" (amountChange)="this.amount= $event"> </app-child>
اکنون اگر برنامه را آزمایش کنیم، با کلیک بر روی دکمه‌ی withdraw فرزند، مقدار کاهش یافته به والد نیز منعکس می‌شود:
پیاده سازی syntax ویژه‌ی Banana in a box
تا اینجا پیاده سازی two way data-binding سفارشی به پایان می‌رسد. اما تعریف طولانی:
<app-child [amount]="amount" (amountChange)="this.amount= $event"> </app-child>
<app-child [(amount)]="amount"> </app-child>
نکته‌ی ویژه‌ی آن، وجود پسوند Change در نام رخ‌داد تعریف شده‌است:
@Input() amount: number; @Output() amountChange = new EventEmitter();
بنابراین به صورت خلاصه جهت تعریف یک انقیاد دو طرفه سفارشی:
- ابتدا باید انقیاد به یک خاصیت ورودی x را تعریف کرد.
- سپس نیاز است انقیاد به یک رخ‌داد خروجی هم‌نام، که نام آن، پسوند Change را اضافه‌تر دارد، یعنی xChange را تعریف کرد.
- اکنون می‌توان two-way data binding syntax ویژه‌ای را به نام banana in a box بر روی این‌دو تعریف کرد[(x)].
کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید.
سناریویی را در نظر بگیرید که در آن بعد از احراز هویت کاربر، لیست دسترسی‌هایی را که کاربر به بخش‌های مختلف خواهد داشت، از سرور دریافت می‌کند. به عنوان مثال کل دسترسی‌های موجود در سیستم به شرح زیر است:
همانطور که مشاهده می‌کنید کافی است canActivate در هر Route را به PermissionGuard تنظیم کنید. همچنین در data از طریق کلید Permission، تنظیمات این Guard را مشخص کنید. کلید Permission در data یک شیء از نوع IPermissionGuardModel را دریافت خواهد کرد که حاوی خصوصیات زیر است:
در مثال بالا درصورتیکه کاربر دسترسی Admin « یا » دسترسی DeleteUser را داشته باشد، امکان مشاهده (به صورت پیش فرض) المنت را خواهد داشت. مثال زیر یعنی تمامی کاربران با هر دسترسی امکان مشاهده المنت را خواهند داشت؛ بجز دسترسی GeustUser.
تمامی استراتژی‌های از قبل تعریف شده و قابل استفاده برای خصوصیت onAuthorizedPermission و onUnauthorizedPermission به شرح زیر است:
و تگهای Html زیر: نکته: هر تغییر در لیست دسترسی‌ها در لحظه سبب اجرای دوباره دایرکتیوها خواهد شد و تغییرات، در همان لحظه در لایه نمایش قابل مشاهده خواهند بود.
- ViewUsers
- CreateUser
- EditUser
- DeleteUser
حالا فرض کنید، کاربر X بعد از احراز هویت، از لیست دسترسی‌های موجود، تنها دسترسی ViewUsers و EditUser را دریافت می‌کند. یعنی تنها مجاز به مشاهده‌ی لیست کاربران و ویرایش کردن آنها میباشد.
در اینجا جهت جلوگیری از دسترسی به ویرایش کاربر، با استفاده از یک Router guard سفارشی می‌توان مسیر users/edit را برای کاربر غیر قابل استفاده کرد؛ به نحوی که اگر کاربر وارد شده مجوز EditUser را نداشت، این مسیر غیر قابل دسترسی باشد.
از طرفی صفحه‌ی ViewUsers، برای کاربری با تمامی دسترسی‌ها، به شکل زیر خواهد بود:
همانطور که مشاهده می‌کنید، المنت‌هایی در صفحه وجود دارند که کاربر X نباید آنها را مشاهده کند. از جمله دکمه حذف کاربر و دکمه ایجاد کاربر. برای مخفی کردن آنها چه راه‌حلی را می‌توان ارائه داد؟ شاید بخواهید برای اینکار از ngIf* استفاده کنید. برای اینکار کافی است دست بکار شوید تا مشکلاتی را که در این روش به آنها بر می‌خورید، متوجه شوید. از جمله این مشکلات می‌توان به پیچیدگی بسیار زیاد و وجود کدهای تکراری در هر کامپوننت اشاره کرد (در بهترین حالت هر کامپوننت باید سرویس حاوی دسترسی‌ها را در خود تزریق کرده و با استفاده از توابعی، وجود یا عدم وجود دسترسی را بررسی کند).
راه‌حل بهتر، استفاده از یک Directive سفارشی است. همچنین ماژول Ng2Permission علاوه بر فراهم کردن Directive جهت مدیریت المنت‌های روی صفحه، امکاناتی را جهت نگهداری و تعریف دسترسی‌های جدید و همچنین محافظت از Routeها فراهم کرده است. این ماژول الهام گرفته از ماژول angular-permission میباشد.
کافی است با استفاده از دستور زیر این ماژول را نصب کنید:
npm install angular2-permission --save
بعد از نصب، ماژول Ng2Permission را در قسمت imports در ماژول اصلی برنامه، اضافه کنید.
import { Ng2Permission } from 'angular2-permission';
@NgModule({
imports: [
Ng2Permission
]
}) مدیریت دسترسی‌ها
برای مدیریت دسترسی‌های کاربر، از سرویس PermissionService، در هرجایی از برنامه می‌توانید استفاده کنید. این سرویس دارای متدهای زیر است.:
| توضیحات | امضاء |
| تعریف دسترسی‌های جدید | define(permissions: Array<string>): void |
| افزودن دسترسی جدید | add(permission: string ) : void |
| حذف دسترسی مشخص شده | remove(permission: string ) : void |
| برسی اینکه دسترسی قبلا تعریف شده است؟ | hasDefined( permission : string ) : boolean |
| برسی اینکه حداقل یکی از دسترسی‌های ورودی قبلا تعریف شده است؟ | hasOneDefined(permissions: Array < string > ) : boolean |
| حذف تمامی دسترسی‌ها | clearStore( ) : void |
| دریافت تمامی دسترسی‌های تعریف شده | get store ( ) : Array < string> |
| Emitter جهت تغییر در دسترسی‌ها | get permissionStoreChangeEmitter ( ) : EventEmitter< an y> |
برای مثال جهت تعریف دسترسی‌های جدید، کافی است سرویس PermissionService را تزریق کرده و با استفاده از متدهای define اقدام به اینکار کنید:
import { PermissionService } from 'angular2-permission';
@Component({
[…]
})
export class LoginComponent implements OnInit {
constructor(private _permissionService: PermissionService) {
this._permissionService.define(['ViewUsers', 'CreateUser', 'EditUser', 'DeleteUser']);
}
} آنچه که واضح است، این است که لیست دسترسی‌ها می‌توانند از سمت سرور تامین شوند.
محافظت از مسیرهای تعریف شده
بعد از تعریف دسترسی‌ها، برای محافظت از مسیرهای غیر مجاز برای کاربر می‌توانید از PermissionGuard به شکل زیر استفاده کنید:
import { PermissionGuard, IPermissionGuardModel } from 'angular2-permission';
[…]
const routes: Routes = [
{
path: 'login',
component: LoginComponent,
children: []
},
{
path: 'users',
component: UserListComponent,
canActivate: [PermissionGuard],
data: {
Permission: {
Only: ['ViewUsers'],
RedirectTo: '403'
} as IPermissionGuardModel
},
children: []
},
{
path: 'users/create',
component: UserCreateComponent,
canActivate: [PermissionGuard],
data: {
Permission: {
Only: ['CreateUser'],
RedirectTo: '403'
} as IPermissionGuardModel
},
children: []
},
{
path: '403',
component: AccessDeniedComponent,
children: []
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } | توضیحات | خصوصیت |
| فقط دسترسی‌های تعریف شده در این قسمت، امکان پیمایش به این مسیر را خواهند داشت. | Only |
| تمامی دسترسی‌های تعریف شده، به جز دسترسی‌های تعریف شده در این قسمت، امکان پیمایش به این مسیر را خواهند داشت. | Except |
| در صورتیکه تقاضای غیر مجازی جهت پیمایش به این مسیر صادر شد، کاربر را به این مسیر هدایت می‌کند. | RedirectTo |
نکته ۱: مقدار دهی همزمان Only و Except مجاز نیست.
نکته ۲: ذکر چند دسترسی در هر یک از خصوصیت‌های Only و Except معنی «یا منطقی» دارد. مثلا در قطعه کد زیر، اگر دسترسی Admin باشد «یا» دسترسی CreateUser باشد امکان مشاهده پیمایش صفحه وجود خواهد داشت.
{
path: 'users/create',
component: UserCreateComponent,
canActivate: [PermissionGuard],
data: {
Permission: {
Only: ['Admin', 'CreateUser'],
RedirectTo: '403'
} as IPermissionGuardModel
},
children: []
} محافظت از المنت‌های صفحه
جهت محافظت از المنت‌های موجود در صفحه، ماژول Ng2Permission دایرکتیوهایی را برای این منظور تدارک دیده است:
| توضیحات | Input type | Directive |
| فقط دسترسی‌های تعریف شده در این دایرکتیو امکان مشاهده (به صورت پیش فرض) المنت را دارند. | Arrayy<string> | hasPermission |
| تمامی دسترسی‌های موجود، به جز دسترسی‌های تعریف شده در این دایرکتیو امکان مشاهده (به صورت پیش فرض) المنت را دارند. | Array<string> | exceptPermission |
| استراتژی برخورد با المنت، هنگامیکه کاربر دسترسی به المنت دارد. | string | Function | onAuthorizedPermission |
| استراتژی برخورد با المنت، هنگامیکه کاربر دسترسی به المنت را ندارد. | string | Function | onUnauthorizedPermission |
در مثال زیر فقط کاربرانی که دسترسی DeleteUser را داشته باشند، امکان مشاهده دکمه حذف را خواهند داشت.
<button type="button" [hasPermission]="['DeleteUser']"> <span aria-hidden="true"></span> Delete </button>
در صورتیکه بیش از یک دسترسی مد نظر باشد، با کاما از هم جدا خواهند شد.
<button type="button" [hasPermission]="[ 'Admin', 'DeleteUser']"> <span aria-hidden="true"></span> Delete </button>
<button type="button" [exceptPermission]="['GeustUser']"> <span aria-hidden="true"></span> Delete </button>
به صورت پیش فرض هنگامیکه کاربری دسترسی به المنتی را نداشته باشد، دایرکتیو، این المنت را مخفی خواهد کرد (با تنظیم استایل display به none). شاید شما بخواهید بجای مخفی/نمایش المنت، مثلا از فعال/غیرفعال کردن المنت استفاده کنید. برای این کار از خصوصیت onAuthorizedPermission و onUnauthorizedPermission به شکل زیر استفاده کنید:
<button type="button" [hasPermission]="['GeustUser']" onAuthorizedPermission="enable" onUnauthorizedPermission="disable"> <span aria-hidden="true"></span> Delete </button>
| رفتار | مقدار |
| حذف خصوصیت disabled از المنت | enable |
| افزودن خصوصیت disabled به المنت | disable |
| تنظیم استایل display به inherit | show |
| تنظیم استایل display به none | hide |
در صورتیکه هیچ‌کدام از این استراتژی‌ها، پاسخگوی نیاز شما جهت برخورد با المنت نبود، می‌توانید بجای ارسال یک رشته ثابت به خصوصیت onAuthorizedPermission و onUnauthorizedPermission، یک تابع را ارسال کنید تا عملی که می‌خواهید، بر روی المنت انجام دهد. به عنوان مثال می‌خواهیم در صورتیکه کاربر مجاز به استفاده از المنتی نبود، المنت را از طریق تنظیم استایل visibility به hidden، مخفی کنیم و در صورتیکه کاربر مجاز به استفاده از المنت بود، استایل visibility به inherit تنظیم شود.
با این فرض، کدهای کامپوننت به شکل زیر:
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent {
constructor() { }
OnAuthorizedPermission(element: ElementRef) {
element.nativeElement.style.visibility ="inherit";
}
OnUnauthorizedPermission(element: ElementRef) {
element.nativeElement.style.visibility = "hidden";
}
} <button [hasPermission]="['CreateUser']" [onAuthorizedPermission]="OnAuthorizedPermission" [onUnauthorizedPermission]="OnUnauthorizedPermission"> <span aria-hidden="true"></span> Add New User </button>
Angular 14 was released and it introduces two exciting new features / changes:
- Typed (Reactive) Forms
- Standalone Components
