קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
ראשי ♦ אנגולר ♦ הגדרות אבטחה על ראוטינג של אנגולר (Guards)

הגדרות אבטחה על ראוטינג של אנגולר (Guards)

עידן יצחקי 5 בספטמבר 2021 אין תגובות

הרעיון שעומד מאחורי גארד (guard) הוא מאוד פשוט, מדובר בפונקציה שמופעלת ממש לפני שמבוצע ראוטינג ב-URL,

אם הפונקציה מחזירה TRUE אז זה תקין ואז הניווט מתבצע, אם חוזר FALSE אז הניווט נחסם.

נעשה את זה כך:

import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from "@angular/router";
import { Observable } from "rxjs";
import { AuthService } from "./auth.service";

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router) { }
    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
        const isAuth = this.authService.getIsAuth();
        if (!isAuth) {
            this.router.navigate(['/login']);
        }
        return isAuth;
    }

}

AuthService – קובץ סרויס כלשהו שהכנו והוא מחזיק משתנה bool לאם המשתמש ביצע login או לא, זה יכול להיות כל דבר שתרצו.

בגלל שנחנו משתמשים בפונקצה שלנו כדי לקרוא לסרויס, והשימוש שלנו בפונקציה הוא כסרויס אז יש לנו מצב שסרויס קורא לסרויס ולכן אנחנו מוסיפים מעל לכולם את Injectable.

בפונקציה שלנו אנחנו עושים בדיקה לאם המשתמש יכול לגלוש לראוט המדובר (ראוט שאנחנו רוצים שרק משתמשים רשומים יקבלו גישה), במידה שכן אז שורה 17 מחזירה תשובה תקינה.

במידה שלא אז יכולנו להחזיר את אותה תשובה בדיוק, אבל במקום זה, אנחנו מבצעים ניתוב של היוזר לדף ההתחברות כדי שיבצע לוג-אין.

נעדכן את רכיב הראוטינג כך:

const routes: Routes = [
  { path: '', component: PostListComponent },
  { path: 'create', component: PostCreateComponent, canActivate: [AuthGuard] },
  { path: 'edit/:postId', component: PostCreateComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule { }

בשורה 12 אנחנו מושכים את הפונקציה למודול שלנו.

על כל מקום שאנחנו רוצים להגן נוסיף את התוספת הזאת canActivate: [AuthGuard] .

במקרה שלנו, אנחנו מגנים על יצירה של פוסט חדש ועריכה שלו מפני משתמשים שלא ביצעו רישום ומנסים להגיע לדף ישירות מה-URL.

פוסטים קשורים:

אנגולר NavigationExtras – skipLocationChange תמונת אווירה של מבוךהגדרה בסיסית לאנגולר ראוטינג תמונת אווירה של אותיות צבעוניותSEO| שינוי כותרת של הדף באנגולר תמונת אווירה של רשת מחשביםאיך להפעיל פונקציה ברכיב כשמתבצע ניווט באנגולר
אנגולר

אודות המחבר

עידן יצחקי להציג את כל הפוסטים של עידן יצחקי


« פוסט קודם
פוסט הבא »

השארת תגובה

ביטול

חיפוש באתר
בחירת העורכים
29 בדצמבר 2023 עידן יצחקי

שדה טקסט עשיר עם תמונות

אתם הולכים להיות מופתעים עד כמה HTML יכול להיות חכם ולבצע משהו כל כך מורכב, שאם אנחנו היינו רוצים ליצור

1 באוקטובר 2021 עידן יצחקי

איך למשוך דינמית favicon של אתרים אחרים ב-JS

בפוסט זה נראה איך אפשר על פי לינקים בדף למשוך את ה-favicon מהדומיין שלהם באופן דינמי, בדיקה של תקינות התמונה

פופולרי
Javascript functions – היכרות עם סוגי פונקציות
Javascript
21 בדצמבר 2024 אין תגובות
Nested routing in angular standalone component
Typescript
15 בנובמבר 2024 תגובה אחת
בחרו לפי תגיות
angular blockchain css ethers express front-end fullstack GQL html javascript next js nextjs nodejs react hooks reactjs solidity webgl אנגולר בלוקציין וורדפרס לימודי אנגולר לימודי וורדפרס לימוד ריאקט מדריך front-end מדריך GQL מדריך אנגולר מדריך וורדפרס מדריך חינם react מדריך ריאקט מפתח בלוק מפתח בלוקציין מתכנת front-end מתכנת בלוקציין מתכנת פרונט סולידיטי קורס front end קורס fullstack קורס nextjs קורס אנגולר קורס בלוקציין קורס בלוקציין בחינם קורס סולידיטי קורס ריאקט קורס תכנות קורס תכנות בחינם
סינון על פי קטגוריות
CSS fullstack HTML IIS Javascript nodeJs SEO Typescript אנגולר בלוקציין בניית אתרים וורדפרס חיפוש עבודה כלים נוספים כללי נגישות קורסים ריאקט תלת מימד תקלות ופתרונות
צור קשר
כל הזכויות שמורות לקודקודייל
ליצירת קשר: @ קודקודייל
גלילה לראש העמוד