فصل ۷-۳: تعیین سطح دسترسی برای مسیرها در انگولار ۴

          برنامه نویس 
            بازدید : 33
          چهارشنبه 09 مرداد 1398
           نظرات (0)
        

با مطالعه‌ دو بخش ۱ و ۲ از فصل ۷ اطلاعات نسبتا مناسبی در ارتباط با مسیردهی (Routing) در انگولار ۴ کسب کردید. حال در ادامه‌ی این دو بخش، مبحث مسیردهی را در سطح پیشرفته‌تر بررسی می‌کنیم و در نهایت در فصل ۷-۴ با ارائه‌ی مباحث امنیتی مسیرها این فصل را به اتمام می‌رسانیم. با ما همراه باشید.

تعیین سطح دسترسی برای ویرایش

همانطور که در مثال گذشته ملاحظه کردید توانستیم با استفاده از پارامترها پویایی و داینامیک بودن اطلاعات یک صفحه را ایجاد کرده و با تبادل اطلاعات ببین کامپوننت و آدرس درخواستی، مشخصات دقیق هر سرور یا کاربری را نمایش دهیم. حال در این قسمت می‌خواهیم در ادامه‌ی مثال قبل، تعیین سطح دسترسی برای ویرایش یک سرور و یا کاربر را به صورت خیلی ساده و مقدماتی خدمت شما عزیزان آموزش دهیم. توجه داشته باشید که تعیین سطح دسترسی یک فصل جداگانه را به خود اختصاص می‌دهد اما در این بخش می‌خواهیم شما را با مفاهیم مقدماتی آن آشنا کنیم. برای انجام اینکار ابتدا فایل server.component.html را باز کرده و یک دکمه برای ویرایش سرور همانند زیر ایجاد می‌کنیم:

 
1
2
3

<h5>{{server.name}}</h5>
<p>وضعیتسرور:{{server.status}}</p>
<button class="btn btn-primary"(click)="onEditServer()">ویرایشسرور</button>

سپس درنظر داریم که وقتی کاربر روی دکمه‌ی «ویرایش سرور» کلیک کرد به صفحه‌ی ویرایش سرور منتقل شود. در این حالت باید فایل server.component.html را باز کرده و درون متد onEditServer از متد navigate به صورت زیر استفاده کنیم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import{Component,OnDestroy,OnInit}from'@angular/core';
 
import{ServersService}from'../servers.service';
import{ActivatedRoute,Params,Router}from"@angular/router";
import{Subscription}from"rxjs";
 
@Component({
    selector:'app-server',
    templateUrl:'./server.component.html',
    styleUrls:['./server.component.css']
})
export classServerComponent implementsOnInit,OnDestroy{
    server:{id:number,name:string,status:string};
    paramsSubscribtion:Subscription;
 
    constructor(privateserversService:ServersService,
                privateroute:ActivatedRoute,
                privaterouter:Router){
    }
 
    ngOnInit(){
        constid=+this.route.snapshot.params['id'];
        this.server=this.serversService.getServer(id);
        this.paramsSubscribtion=this.route.params.subscribe(
            (params:Params)=>{
                this.server=this.serversService.getServer(+params['id'])
            }
        );
 
    }
    ngOnDestroy(){
        this.paramsSubscribtion.unsubscribe();
    }
    onEditServer(){
        this.router.navigate(['edit'],{relativeTo:this.route})
    }
}

در این مرحله می‌خواهیم تعیین کنیم که چه کاربری اجازه‌ی بروزرسانی و ویرایش یک سرور را بر عهده داشته باشد. بنابراین وارد فایل servers.component.html شده و در نهایت تغییرات زیر را برای ویژگی queryParams انجام می‌دهیم:

 
1

[queryParams]="{allowEdit: server.id == 3 ? '1': '0'}"

سپس فایل edit-server.component.ts را باز کرده و در قسمت مربوط به هوک ngOnInit متد queryParams را به صورت زیر تغییر می‌دهید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import{Component,OnInit}from'@angular/core';
 
import{ServersService}from'../servers.service';
import{ActivatedRoute,Params}from"@angular/router";
 
@Component({
    selector:'app-edit-server',
    templateUrl:'./edit-server.component.html',
    styleUrls:['./edit-server.component.css']
})
exportclassEditServerComponentimplementsOnInit{
    server:{id:number,name:string,status:string};
    serverName='';
    serverStatus='';
    allowEdit=false;
 
    constructor(privateserversService:ServersService,privateroute:ActivatedRoute){
    }
 
    ngOnInit(){
        this.route.queryParams.subscribe(
            (queryParams:Params)=>{
                this.allowEdit=queryParams['allowEdit']==1?true:false;
            }
        );
        this.route.fragment.subscribe();
        this.server=this.serversService.getServer(1);
        this.serverName=this.server.name;
        this.serverStatus=this.server.status;
    }
 
    onUpdateServer(){
        this.serversService.updateServer(this.server.id,{name:this.serverName,status:this.serverStatus});
    }
 
}

در نهایت فایل edit-server.component.html را نیز به صورت زیر تغییر می‌دهیم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<h4 *ngIf="allowEdit == false">شمااجازهدسترسیبهاینبخشراندارید</h4>
<div *ngIf="allowEdit == true">
    <div class="form-group">
        <label for="name">نامسرور</label>
        <input
                type="text"
                id="name"
                class="form-control"
                [(ngModel)]="serverName">
    </div>
    <div class="form-group">
        <label for="status">وضعیتسرور</label>
        <select
                id="status"
                class="form-control"
                [(ngModel)]="serverStatus">
            <option value="online">روشن</option>
            <option value="offline">خاموش</option>
        </select>
    </div>
    <button
            class="btn btn-primary"
            (click)="onUpdateServer()">بروزرسانیسرور
    </button>
</div>

بسیار عالی کار به اتمام رسید. حال اگر روی دکمه‌ی ویرایش سرور کلیک کنید طبیعتا به صفحه‌ای مشابه تصویر زیر روبه‌رو خواهید شد:

تعیین سطح دسترسی برای ویرایش سرور

اما یک مشکلی در این مثال وجود دارد وقتی شما روی گزینه سوم یعنی «سرور توسعه روکسو» کلیک می‌کنید علی‌رغم اینکه مقدار id سرور برای ۳ است ولی باز هم سطح دسترسی را برای شما ایجاد نمی‌کند. برای حل این مشکل باید از یک ویژگی به نام queryParamsHandling استفاده کرد که باید به فایل server.component.ts و در متد navigate اضافه کنیم. این ویژگی باعث می‌شود که اطلاعات پارامترهای موجود در آدرس پس از کلیک کردن روی دکمه‌ی «ویرایش سرور» از بین نرود. برای ویژگی queryParamsHandling دو مقدار می‌توان لحاظ کرد:

merge: در این حالت اطلاعات قدیمی و جدید روی آدرس بار با یکدیگر ترکیب می‌شوند.
preserve: در این حالت اطلاعات جدید با حفظ اطلاعات قدیمی، بروزرسانی خواهند شد.

به عنوان مثال فرض کنید آدرس اصلی صفحه سرور ما به صورت زیر است:

http://localhost:4200/servers/3?allowEdit=1#loading

حال اگر از merge استفاده کنیم آدرس پس از کلیک روی دکمه به صورت زیر خواهد شد:

http://localhost:4200/servers//3/edit?allowEdit=1

و اگر از preserve استفاده کنیم این آدرس به صورت زیر تغییر می‌کند:

http://localhost:4200/servers//3/edit?allowEdit=1&page=3

بنابراین در فایل server.component.ts داریم:

 
1

this.router.navigate(['edit'],{relativeTo:this.route,queryParamsHandling:'preserve'})

بسیار عالی حال اگر روی ویرایش سرور کلیک کنید برای سرور سوم صفحه و فرم ویرایش نمایش داده خواهد شد. البته این نرم‌افزار هنوز نیاز به بهینه‌سازی بیشتری دارد چون اطلاعات موجود در فرم با اطلاعات سرور شماره ۳ یکسان نیست. در آینده به اصلاح این بخش می‌پردازیم.

دستور یا فرمان Redirect در انگولار ۴

اگر کاربر در صفحه شما یک آدرس مشابه http://localhost:4200/something را وارد کند، در صفحه کنسول خطا ایجاد شده و به او نمایش داده می‌شود. اما برای طراحی و بهینه‌سازی حرفه‌ای وب‌سایت باید کاربر را به سمتی هدایت کنیم که اگر صفحه‌ای را اشتباه وارد کرد به مسیر مشخصی انتقال پیدا کند. برای انجام اینکار ابتدا یک کامپوننت جدید به نام page-not-found با دستور زیر ایجاد می‌کنیم:

 
1

nggcpage-not-found

سپس در فایل page-not-found.component.html پیام زیر را قرار می‌دهیم:

 
1

<h3>صفحهموردنظریافتنشد!</h3>

در نهایت به فایل app.module.ts مراجعه کرده و مسیردهی موجود در ویژگی appRoutes را به صورت زیر ویرایش خواهیم کرد:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

constappRoutes:Routes=[
    {path:'',component:HomeComponent},
    {
        path:'users',component:UsersComponent,children:[
        {path:':id/:name',component:UserComponent},
    ]
    },
    {
        path:'servers',component:ServersComponent,children:[
        {path:':id',component:ServerComponent},
        {path:':id/edit',component:EditServerComponent}
    ]
    },
    {path:'not-found',component:PageNotFoundComponent},
    {path:'**',redirectTo:'/not-found'}
];

همانطور که ملاحظه می‌کنید ابتدا یک مسیر به نام http://localhost:4200/not-found ایجاد کردیم که از کامپوننت page-not-found پیروی می‌کند. سپس در خط آخر این ویژگی یک مسیر با ساختار ** ایجاد کرده و آن را به مسیر not-found ریدایرکت کرده‌ایم. علامت دو ستاره ** به معنی تمام مسیرهایی که تعریف نشده است.

نکته بسیار مهم: حتما و حتما باید علامت ** و مسیری که شامل این علامت می‌شود در آخرین خط متغییر appRoutes تعریف شود زیرا مسیرها در انگولار از بالا به پایین خوانده می‌شوند و اگر ما این مسیر را در بالاترین نقطه تعریف کنیم تمام صفحات به صورت پیشفرض not-found خواهند بود.

بسیار عالی به شما عزیزان تبریک می‌گوییم در این بخش توانستید توانایی‌هایی جدید را در زمینه کار با مسیردهی‌ها کسب کنید. اما یکی از مباحثی که همواره برای ما حائز اهمیت است، مبحث امنیت می‌باشد. در بخش بعدی ابزارهای جدیدی را تولید و مورد استفاده قرار می‌دهیم تا امنیت مسیردهی‌ها در بالاترین سطح ممکن قرار گیرد. با ما همراه باشید.

توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)

فصل ۱

فصل ۲

فصل ۳:‌ خطایابی (Debugging) در انگولار ۴

فصل ۴

فصل ۵

فصل ۶

فصل ۷

فصل ۸: معرفی Observable یا مشاهده کننده‌ها در انگولار ۴

فصل ۹

فصل ۱۰: معرفی فیلترها یا Pipes در انگولار ۴

فصل ۱۱: معرفی درخواست‌های Http در انگولار ۴

منبعم رو کسو

ارسال نظر برای این مطلب