ngx-can-activate-app 是一个 Angular 应用中使用的 npm 包，它可以帮助我们在页面进入前进行一些逻辑判断，从而控制页面是否可以进入。
在本文中，我们将会介绍如何基于 ngx-can-activate-app 实现一个权限控制的功能。我们将会先介绍 ngx-can-activate-app 的安装和使用，然后再展示一个基于 ngx-can-activate-app 实现的权限控制功能的示例代码。
安装和使用
首先，我们需要用 npm 安装 ngx-can-activate-app：
npm install ngx-can-activate-app --save
安装好后，我们可以在 Angular 模块中导入 ngx-can-activate-app 模块。比如说我们在 app.module.ts 中进行导入：
-- -------------------- ---- -------
------ - ----------------------- - ---- -----------------------
-----------
-------- -
--------------
---------------------------------
--
---------- - ------------ -
--
------ ----- --------- --注意，我们必须使用 forRoot() 方法来创建 ngx-can-activate-app 模块，并进行配置。然后，我们就可以在我们的路由中使用它了。
import { NgxCanActivateApp } from 'ngx-can-activate-app';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'admin/products', component: ProductsComponent, canActivate: [NgxCanActivateApp] }
];在上面的示例代码中， canActivate 属性设置为 NgxCanActivateApp，这表示我们要进入该路由时需要经过 NgxCanActivateApp 的验证。
示例代码：基于 ngx-can-activate-app 的权限控制
下面我们来介绍一个基于 ngx-can-activate-app 实现的权限控制功能。在这个功能中，我们需要控制用户是否可以访问“管理”功能界面。
首先，我们需要在路由中添加一个 canActivate 属性，并给它传递一个回调函数。这个回调函数将会返回一个布尔值，表示用户是否有权限访问该路由。在我们的示例代码中，回调函数的实现如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------------------- ------------------- - ---- ------------------
------ - -------------- - ---- -----------------------
-------------
------ ----- ----------- ---------- -------------- -
------------------ ----------------------- ------ --------------------- ------- -
------ ------------------------------- --- -------
-
-在上面的代码中，我们定义了 MyAuthGuard 类，并实现了 NgxCanActivate 接口中定义的 canActivate 方法。这个方法将会被 ngx-can-activate-app 调用，在其中我们可以编写一些逻辑代码来验证用户是否有权限访问该路由。
在我们的示例代码中，我们通过从 localStorage 中读取 isAdmin 属性的值来判断用户是否有权限访问当前路由。当 isAdmin 的值为 true 时，表示用户有权限访问该路由。
接下来，我们需要在我们的 app.module.ts 中声明 MyAuthGuard：
-- -------------------- ---- -------
------ - ----------------------- - ---- -----------------------
------ - ----------- - ---- ------------------
-----------
-------- -
--------------
---------------------------------
--
---------- -
-----------
--
---------- - ------------ -
--
------ ----- --------- --最后，我们可以在我们的路由中使用 MyAuthGuard：
import { MyAuthGuard } from './my-auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'admin/products', component: ProductsComponent, canActivate: [MyAuthGuard] }
];到此为止，我们已经实现了基于 ngx-can-activate-app 的权限控制功能。现在当用户没有 isAdmin 的权限时，在访问“管理”功能界面时会被自动重定向到其他页面。
总结
在本文中，我们学习了如何使用 ngx-can-activate-app 包进行页面进入前的逻辑控制。我们还展示了一个基于 ngx-can-activate-app 实现的权限控制功能的示例代码，并详细介绍了它的实现方法。
从这个案例中，我们可以学到使用 ngx-can-activate-app 组件实现基础的权限控制是很简单的。这对于那些需要开发一些权限控制功能的开发者尤其有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f82238a385564ab6be1