Angular 8 權限控制

1. 沒有權限內的頁面，自動跳轉到“無法找到頁面”

2. 沒有權限的按鈕，控件不顯示

3. 沒有登錄token訪問需要登錄的頁面，自動跳轉到“無法找到頁面”

 

思路：用一個service 去存儲登錄用戶的權限列表。 在需要權限控制的按鈕、控件上通過 *ngIf 控制控件可見性。在每個頁面 active 之前去判斷權限，並實現沒有權限跳轉至‘無法找到頁面’

• 創建一個permission.service.ts

主要功能：將 “permission1, permssion2, permission3, permission4” 的permission 字符串轉化成一個Json 對象：{permission1:true, permission2:true, permission3:true, permission4:true}

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root'

})

export class PermissionsService {

  public Items: any;

  constructor() {

    if (!this.Items) {

      //get permission string from storage

      let permissionString = window.sessionStorage.getItem('permission');

      if (permissionString) {

        //parse permission array

        this.convertPermissionToJsonStr(permissionString.toLowerCase().split(','));

      }

    }

  }

  setStorage_permission(permissionString) {

    window.sessionStorage.setItem('permission', permissionString);

     //parse permission array

    this.convertPermissionToJsonStr(permissionString.toLowerCase().split(','));

  }

  getStorage_permission() {

    return window.sessionStorage.getItem('permission');

  }

  //convert permission string to jason properties

  private convertPermissionToJsonStr(permArray) {

    let jsonArray = new Array();

    if (permArray && permArray.length>0) {

      permArray.forEach(x => {

        jsonArray.push('"' + x + '"' + ":true");

      });

      this.Items = JSON.parse("{" + jsonArray.toString() + "}");

    }

  }

}

 

• 在需要添加權限的 component 中添加 service 引用

 

 

 

 

 

• 在 HTML 中， 通過permission 對象去判斷是否有權限。 這個地方 Item 對象包含的 property 就是權限列表中的每個權限名 string.

 

• 添加一個 auth-guard.service.ts， 用來截取每個頁面激活前的判斷處理

在頁面 activate 之前，去判斷：有沒有token, 有沒有即將激活頁面的permission. 如果正常激活 return true, 不激活 return false.

• import { Injectable } from '@angular/core';

  import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

  import { Observable } from 'rxjs';

  import { AllService } from '../services/all.service';

  
  

  @Injectable({

    providedIn: 'root'

  })

  export class AuthGuardService implements CanActivate {

  
  

    constructor(private all: AllService, private _router: Router) {

    }

  
  

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

  
  

      let permissions = this.all.permission.getStorage_permission();

      let localRouter = next.url[0].path.trim();

      let s = this.getPermissionByUrl(localRouter);

  
  

      if (localRouter != 'charityAllInOne') {

        this.all.share.SetCharityStep({ Step: -1 });

      }

  
  

      let token = this.all.cache.getStorage_userToken();

  
  

      //no token

      if (token == null) {

        // navigate to login page

        this._router.navigate(['/login']);

        // you can save redirect url so after authing we can move them back to the page they requested

        return false;

      }

  
  

      //has user permission

      if (permissions != null) {

        let permArray = permissions.toLowerCase().split(',');

        let match = permArray.find(x => x == s);

        if (match != undefined)  //need has url permission

        {

          return true;

        }

      }

  
  

      //page no permission

      this._router.navigate(['/pageNotFound']);

      // you can save redirect url so after authing we can move them back to the page they requested

      return false;

  
  
  
  

    }

  
  

  }