Angular 和 Laravel 如何在客戶端管理用戶權限

Question

下面的代碼片段是一個使用 Laravel Sanctum 對用戶進行身份驗證的 Angular 服務：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private baseURL = "http://localhost:8000/api";

  constructor(private http: HttpClient,public router: Router) { }

  login(username: string, password: string): Observable<boolean> {
    return this.http.post<{token: string}>(this.baseURL+'/login', {email: username, password: password})
      .pipe(
        map(result => {
          localStorage.setItem('access_token', result.token);
          return true;
        })
      );
  }

  getToken() {
    return localStorage.getItem('access_token');
  }

  logout() {
    let removeToken = localStorage.removeItem('access_token');

    if (removeToken == null) {
      this.router.navigate(['login']);
    }
  }

  public get isLoggedIn(): boolean {
    //TODO: Check token expiry and other security checks
    return (localStorage.getItem('access_token') !== null);
  }
}

我的問題是，如果我使用 spatie 權限或 Laravel Gates 進行授權，我如何將它們存儲在前端，以便我能夠根據允許訪問的用戶顯示或隱藏菜單？

免責聲明：我習慣於使用刀片模板開發應用程序。 我第一次切換到SPA。

Answer 1

身份驗證（成功登錄）后，您可以通過以下方式管理您的授權（訪問權限）：

如果組件與路由相關，則需要保護路由。 在這種情況下使用：

• Route Guards以保護未經授權的用戶訪問特定 URL 樹下的組件。

如果組件嵌入在視圖中（例如打開或受保護路由下的按鈕或視圖部分），那么您可以：

• 如果您只想從 UI 中隱藏元素，而不是從 DOM 中隱藏元素，請使用帶有[hidden]="condition" html 屬性的屬性綁定。
• 如果要根據特定條件在 UI and DOM 中隱藏或顯示元素，請使用內置的 Angular 指令*ngIf="condition" 。

假設您只想向Super_Admin用戶授予對菜單中item A的訪問權限。 你可以這樣做：

<ng-container *ngIf="rolePropertyFromAPI === 'Super_Admin'">Item A</ng-container>  

這是一個很大的話題，你可以在網上找到很多東西。 查看中等和 Angular In-depth 博客文章以了解如何實施此類策略。 第一步當然是這里的文檔

對於存儲像上面的“Super_Admin”這樣的訪問信用非常簡單。 您在這里有三個選擇：

• 本地存儲或
• sessionStorage或
• 餅干。

易於訪問和持久性的最佳選擇是 localStorage API。 然而，它並不那么安全。 不過，它可以為您完成工作。

最先進和最棘手的一種方法是使用 Observables 將憑據存儲在應用程序狀態中。

使用本地存儲：

1-您訪問您的 API 端點響應

2-在瀏覽器存儲中設置屬性

localStorage.setItem('Super_Admin', JSON.stringify(valueFromBackendEnd))

3-通過存儲的鍵獲取值

localStorage.getItem('Super_Admin')

4-清除存儲。

localStorage.removeItem('Super_Admin')