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')