在前端开发中，我们经常会用到各种 npm 包，其中 ember-materialize-mu-authorization 就是一款可以帮助我们快速构建权限管控的插件。本篇文章将为大家介绍这款插件的使用方法及相关注意事项。
安装
使用 npm 安装该插件非常简单：
npm install ember-materialize-mu-authorization --save
配置
在使用该插件前，需要在 ember 应用的环境配置文件中初始化插件：
-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
-- ------------
------------------------------------- -
-- ------------
---------- -
-
-- ------ ---- ----------- ------------ --
------ ---------------
----------- --------------
--
-
-- ------------------- ----------- --
------ --------------
----------- ----------------
-
--
-- --- ------ --------
----------------- -
-
------ -----
------- ---------
--------- -----
------------- ----
-
-
-
--
-- ----------
------ ----
--权限管理
该插件提供了两种方法来进行权限管理：
1. 在模板文件中使用 can-access 组件
使用该组件可以确定当前用户是否有访问当前页面（即该路由对应的页面）的权限，从而可以决定是否显示相应的内容。示例代码：
{{#can-access route='article.edit'}}
<!--如果用户有权限，则显示相应的表单内容-->
{{/can-access}}2. 在路由中使用 redirectUnauthorizedAccess 方法
使用该方法可以在用户未登录或者没有相应的权限时重定向到指定的页面。示例代码：
-- -------------------- ---- ------- ------ ----- ---- ----------------------- ------ - -------------------------- - ---- ------------------------------------- ------ ------- -------------- ------------ ------------------------------------------- -- ------------ ---
Header 中的操作
该插件还提供了在 header 中显示的一些操作按钮，并提供了相应的回调函数以及是否为按钮或链接等配置。需要注意的是，如果 headerRightItems 中配置了某个操作，则需要在 header 中添加特定的位置来显示该操作，示例代码：
{{#mu-nav-bar as |navbar|}}
{{navbar.link-to 'index' 'Home'}}
{{navbar.link-to 'about' 'About'}}
{{#if navbar.isAuthenticated}}
{{navbar.dropdown-button '操作' items=navbar.headerRightItems}}
{{/if}}
{{/mu-nav-bar}}结语
通过本篇文章的介绍，相信读者已经掌握了使用 ember-materialize-mu-authorization 插件来进行权限管控的方法。该插件的使用可大大提升项目的安全性和管理性，推荐大家在实际项目中尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1da563576b7b1ecccc