Aurelia-auth 是一个强大的认证和授权插件，它可以帮助开发者轻松地保护他们的应用程序或页面。这篇文章将介绍如何使用 aurelia-auth，让你的应用程序更加安全和可靠。
安装 aurelia-auth 包
首先，我们需要使用 npm 进行安装 aurelia-auth。
npm install aurelia-auth --save
配置 aurelia-auth
在 main.js 或者任何其他的入口文件中，我们需要配置 aurelia-auth。
-- -------------------- ---- ------- ------ - ------- - ---- -------------------- ------ - ------ - ---- ----------------- ------ - -------- - ---- -------------- ------ - ------ - ---- ------------------------------- ------ - ----------- - ---- --------------- -------------------- ------ ----- --- - ------------------------ - --------- - ------------ - ----------------------- ------- - ------------ - --- ------- ----- ------------------------ - ----- ------------------- - ---- ------------- ------ ---- -------- ----- ------- --------- ------------------------------ ---- ----- ------ ------ -- - ------ -------- ----- -------- --------- ------------------------------- ---- ------ ----- ------ ------ ------- -- - ------ --------- ----- --------- --------- -------------------------------- ---- ----- ----- ----- ------ -------- ---- ----------- - ------- - ---------- - -- ------------------------------ - ------------------------------------- - - -展开代码
现在，我们已经为我们的应用程序设置了一个 auth 服务，并将注入到 App 中。在 App 的 attached 方法中，我们检查 auth 是否已经授权，如果没有，则导航到 login 页面。
添加 auth 服务
在我们的应用程序中，我们需要使用 auth 服务来处理用户的登录和注销。我们可以在一个 AuthService 类中实现。
-- -------------------- ---- ------- ------ - ------ - ---- ------------------------------- ------ - ---------- - ---- ----------------------- ------ - ------ - ---- ----------------- ------ - ----------- - ---- ----------------- ------------------- ------- ------ ----- ----------- ------- ----------- - ----------------------- ------- - ------------------ ----------- - ------- ----------- ----------------- -- - ------ --------------------------- ------------------------------------- --------------- -------- - ------- ------------------- --------------- ------------------- ------------------- ------- - -- ----------------------------------- --- ------------------ - ------ --------- - ----- - --- ------------- - ------ - -------- ------- -- - -- ------------------------ - --------------------------------------- ------- ---------------------------------------- - ------ -------- -- --------- -------- -- - -- ---------------- --- ---- - -------------------- ------- --------------------------- - ---- -- ---------------- --- ---- - -------------------- ----------- --------------------------- - ------ --------- -- ------------- ----- -- - ------ ------ -- -------------- ----- -- - ------ ------ - -- - ------------ --------- - ------ ----------- --------------------- - ------- ------- ----- ---------------- ------ -------- -- -- -------------- -- ---------------- ---------- -- - -- ----- -- ----------- - ---------------------------------- ------------ ---------------------------------- ------------ --------- - ---------- ------------------ - ----- -------------------------------------- - ------ ---------- --- - --------------- - -------------------------------------- -------------------------------------- ------------------ - ------ --------- - ----- ------------------------------------ - ------- --- - ----------------- - ------ ------------------- - --------- - ------ ---------- - -展开代码
AuthService 类包含以下方法：
login(email, password)：使用用户提供的 email 和 password 进行登录，并保存 token 和用户信息。logout(message)：注销用户，清除 token，并导航到 login 页面。传递 message 来提供注销的原因。isAuthenticated()：检查用户是否具有有效的 token。getUser()：返回用户信息。
在页面中使用 auth
现在，我们已经完成了 auth 的配置和服务，接下来我们需要在我们的页面中使用 auth。我们可以使用 AuthRoute 类来保护我们的路由。
-- -------------------- ---- ------- ------ - ------ - ---- ------------------------------- ------ - ----------- - ---- ----------------- -------------------- ------ ----- --------- - ------------------------ - --------- - ------------ - ------------- - -- ----------------------------- - ------ ----- - ------ --- --------------- -- - --------- --------------- -------- -- -------------- --------- -- ---------------- --- - -展开代码
AuthRoute 类包括一个 canActivate 方法，该方法用于验证用户是否具有正确的认证。如果没有，则会解析为 false 并导航到登录路由。如果你想要自定义失败的导航逻辑，则需要将 canActivate 方法更改为返回 Promise，并解决为 false。
我们可以在路由配置中使用该类：
-- -------------------- ---- ------- ------ - ------ - ---- ----------------- ------ - -------- - ---- -------------- ------ - --------- - ---- --------------- ------ -------- ----------------------- ------- - ------------ - --- ------- ----- ------------------------ - ----- ------------------- - ---- ------------- ------ ---- -------- ----- ------- --------- ------------------------------ ---- ----- ------ ------ -- - ------ -------- ----- -------- --------- ------------------------------- ---- ------ ----- ------ ------ ------- -- - ------ --------- ----- --------- --------- -------------------------------- ---- ----- ----- ----- ------ --------- --------- - ----- ---- - ---- ---------------------------------------- ----------- - ------- -展开代码
在路由配置中，我们将 AuthRoute 注册为路由限制，确保只有经过认证的用户才能访问。具体来说，我们将 AuthRoute 添加到 registerAuthorizeStep 中，并将 auth: true 添加到设置中。
小结
通过这篇文章的介绍，你已经了解了如何使用 aurelia-auth，让你的应用程序更加安全和可靠。具体来说，我们已经完成了以下步骤：
- 安装 aurelia-auth 包
- 配置 aurelia-auth
- 添加 auth 服务
- 在页面中使用 auth
现在，当用户访问受限的页面时，应用程序将检查他们是否已经登录，并在用户未登录时导航到登录页面。
希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61829
