Angular 8 权限控制
<p>1. 没有权限内的页面，自动跳转到“无法找到页面”</p><p>2. 没有权限的按钮，控件不显示</p>
<p>3. 没有登录token访问需要登录的页面，自动跳转到“无法找到页面”</p>
<p> </p>
<p>思路：用一个service 去存储登录用户的权限列表。 在需要权限控制的按钮、控件上通过 *ngIf 控制控件可见性。在每个页面 active 之前去判断权限，并实现没有权限跳转至‘无法找到页面’</p>
<ul>
<li>创建一个permission.service.ts</li>
</ul>
<p style="margin-left: 90px">主要功能：将 “permission1, permssion2, permission3, permission4” 的permission 字符串转化成一个Json 对象：{permission1:true, permission2:true, permission3:true, permission4:true}</p>
<table style="height: 644px; width: 1356px" border="0">
<tbody>
<tr>
<td>
<div>
<div>import { Injectable } from '@angular/core';</div>
<br>
<div>@Injectable({</div>
<div> providedIn: 'root'</div>
<div>})</div>
<div>export class PermissionsService {</div>
<br>
<div> public Items: any;</div>
<br>
<div> constructor() {</div>
<div> if (!this.Items) {</div>
<div> //get permission string from storage</div>
<div> let permissionString = window.sessionStorage.getItem('permission');</div>
<br>
<div> if (permissionString) {</div>
<div> //parse permission array</div>
<div> this.convertPermissionToJsonStr(permissionString.toLowerCase().split(','));</div>
<div> }</div>
<div> }</div>
<div> }</div>
<br>
<div> setStorage_permission(permissionString) {</div>
<div> window.sessionStorage.setItem('permission', permissionString);</div>
<br>
<div> //parse permission array</div>
<div> this.convertPermissionToJsonStr(permissionString.toLowerCase().split(','));</div>
<div> }</div>
<br>
<div> getStorage_permission() {</div>
<br>
<div> return window.sessionStorage.getItem('permission');</div>
<div> }</div>
<br>
<div> //convert permission string to jason properties</div>
<div> private convertPermissionToJsonStr(permArray) {</div>
<br>
<div> let jsonArray = new Array();</div>
<div> if (permArray && permArray.length>0) {</div>
<br>
<div> permArray.forEach(x => {</div>
<div> jsonArray.push('"' + x + '"' + ":true");</div>
<br>
<div> });</div>
<br>
<div> this.Items = JSON.parse("{" + jsonArray.toString() + "}");</div>
<div> }</div>
<div> }</div>
<br>
<div>}</div>
</div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<ul>
<li>在需要添加权限的 component 中添加 service 引用</li>
</ul>
<p style="margin-left: 150px"><img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191225161753753-1100588415.png" alt=""></p>
<p> </p>
<p> </p>
<p style="margin-left: 150px"><img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191225161829294-1344945487.png" alt=""></p>
<p> </p>
<p> </p>
<p> </p>
<ul>
<li>在 HTML 中， 通过permission 对象去判断是否有权限。 这个地方 Item 对象包含的 property 就是权限列表中的每个权限名 string.</li>
</ul>
<p style="margin-left: 150px"><img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191225161951858-1759422711.png" alt=""></p>
<p> </p>
<ul>
<li>添加一个 auth-guard.service.ts， 用来截取每个页面激活前的判断处理</li>
</ul>
<p style="margin-left: 60px">在页面 activate 之前，去判断：有没有token, 有没有即将激活页面的permission. 如果正常激活 return true, 不激活 return false.</p>
<ul>
<li>
<table style="height: 709px; width: 1385px" border="0">
<tbody>
<tr>
<td>
<div>
<div>import { Injectable } from '@angular/core';</div>
<div>import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';</div>
<div>import { Observable } from 'rxjs';</div>
<div>import { AllService } from '../services/all.service';</div>
<br>
<div>@Injectable({</div>
<div> providedIn: 'root'</div>
<div>})</div>
<div>export class AuthGuardService implements CanActivate {</div>
<br>
<div> constructor(private all: AllService, private _router: Router) {</div>
<div> }</div>
<br>
<div> canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {</div>
<br>
<div> let permissions = this.all.permission.getStorage_permission();</div>
<div> let localRouter = next.url.path.trim();</div>
<div> let s = this.getPermissionByUrl(localRouter);</div>
<br>
<div> if (localRouter != 'charityAllInOne') {</div>
<div> this.all.share.SetCharityStep({ Step: -1 });</div>
<div> }</div>
<br>
<div> let token = this.all.cache.getStorage_userToken();</div>
<br>
<div> //no token</div>
<div> if (token == null) {</div>
<div> // navigate to login page</div>
<div> this._router.navigate(['/login']);</div>
<div> // you can save redirect url so after authing we can move them back to the page they requested</div>
<div> return false;</div>
<div> }</div>
<br>
<div> //has user permission</div>
<div> if (permissions != null) {</div>
<div> let permArray = permissions.toLowerCase().split(',');</div>
<div> let match = permArray.find(x => x == s);</div>
<div> if (match != undefined) //need has url permission</div>
<div> {</div>
<div> return true;</div>
<div> }</div>
<div> }</div>
<br>
<div> //page no permission</div>
<div> this._router.navigate(['/pageNotFound']);</div>
<div> // you can save redirect url so after authing we can move them back to the page they requested</div>
<div> return false;</div>
<br><br><br>
<div> }</div>
<br>
<div>}</div>
</div>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
<p><br><br></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/crdanding/p/12097526.html
頁:
[1]