如何向用户显示消息在 Angular 2 中没有权限答案

【问题标题】：How to show a message to user does not has permisson in Angular 2 by guard如何向用户显示消息在 Angular 2 中没有权限
【发布时间】：2016-12-21 19:27:09
【问题描述】：

我正在使用 Angular 2 防护 (canActivate) 进行授权，但是如果用户去他没有授权的路线，就会出现空白屏幕..

我想显示一条消息，您没有这样的权限，这怎么可能？

守卫服务：

import { Injectable } from '@angular/core';
import { CanDeactivate , CanActivate } from "@angular/router";

@Injectable()
export class LoginGuardService implements CanActivate,CanDeactivate<any>{

  constructor() { }

  canActivate(){    
    return true;
  }

  canDeactivate(){
    return window.confirm("You have unsaved changes. Still want to leave?");
   }

}

路由文件

{path:'grade-listing' , component:GradeListingComponent ,canActivate:[LoginGuardService]},

【问题讨论】：

为什么canActivate 总是返回true？
只是检查守卫是否工作，肯定来自逻辑真假

标签： angular

【解决方案1】：

  canActivate(){
    if(yourcondition == true){
      return true;
    } else {
      this.router.navigate(['/yourRoutetoErrorHtml']);
      return false;
    }
  }

类似的东西？

【讨论】：

我不想重定向，我希望该用户看到一些您没有权限的消息，请与您的管理员联系，像这样
hmm 类似：alert('No Authorization!'); 或者您可以安装 material2(github.com/angular/material2) 并使用snackbar / toast 组件

【解决方案2】：

您有几个选择。

1) 使用路由器将它们导航到您制作的组件error/login-required。此页面将根据需要包含一个简单的 html 消息。

请参阅 - https://auth0.com/blog/angular-2-authentication/ 以及他们如何使用 router.navigate 将用户送回登录页面。

2) 你可以显示一个模式。

一个好的、简单的模型库 - https://github.com/shlomiassaf/angular2-modal

【讨论】：