Spree-Ember-Auth 是一款基于 Ember.js 的前端验证库，它可以轻易地与 Spree 集成，提供用户验证试。本文将介绍 Spree-Ember-Auth 的使用教程，并提供示例代码。
什么是 Spree-Ember-Auth？
Spree-Ember-Auth 是一种基于 Ember.js 的前端验证库，它提供了一个 UI 组件和一个身份验证服务，可以轻松集成到 Spree 前端页面中。这个库具有以下特征：
- 提供了用户注册和登录的功能。
- 可与 Spree 后端自定义身份验证机制集成。
- UI 组件可根据需要进行配置，并且可以与任何 CSS 框架集成。
- 可以自定义错误消息，并提供钩子以响应身份验证服务的事件。
安装 Spree-Ember-Auth
通过 npm 工具进行安装：
npm install spree-ember-auth --save
如果你使用的是 Yarn，则可以执行：
yarn add spree-ember-auth
配置身份验证服务
Spree-Ember-Auth 依赖于身份验证服务来管理用户身份验证和令牌认证。这要求你必须先配置身份验证服务。您可以使用 Spree API 或 Spree Deface 应用程序中的身份验证服务。这里我们以 Spree API 为例，进入项目文件夹，使用以下命令进行安装：
npm install spree_auth_devise如果您使用的是 Rails6，则需要将挂载点从 /api 更改为 /spree/api，可以在 config/initializers/spree.rb 配置文件中完成。
完成配置后，你需要在你的 Ember 应用中配置身份验证服务。我们将在环境文件中设置配置，例如，如果您使用的是开发环境，那么您可以在 config/environment.js 文件中配置如下：
-- -------------------- ---- ------- --- --- - - -- --- ---------- - ---------------- -------- -------------- -------------------------------- --------------- --------------------------------- ----------------- ------------------------ ---------------- -------------------------------- ------------------- -------- ---------------------------- -------- ---------------------- ---------- -- -- --- -展开代码
这里是配置参数的说明：
sessionDuration：session 的时长，以秒为单位。用户在此时间段内没有活动会被自动登出。loginEndpoint：登录 HTTP 端点。logoutEndpoint：注销 HTTP 端点。registerEndpoint：注册 HTTP 端点。refreshEndpoint：Token 刷新 HTTP 端点。tokenAttributeName：与后端验证标识通信并从响应中获取 Token 的属性名称。identificationAttributeName：身份验证的参数名称，默认为“email”。passwordAttributeName：身份验证的参数名称，默认为“password”。
添加 UI 组件
在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------------------- ---- --------------------------------------------------- ----- ---------------- - ----------------------------------------- - -- --- --- ------ --------- ---- ------------------------------------------------------- ----- -------- - ---------- - -------------------- --------------------- -- --- -- ----- ------ - --------------------- --------- ------------------- --- --------------------- ------ ------- -------展开代码
示例代码
登录路由
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------------------- ---- ----------------------------------------------------- ----- ---------- - ------------------------------------------- - ------------------------- ------------ -------- - ------------------------- ---------- - -------------------------------------------------------------- - ------ -------------- - ---- - ------ ------------ - - - --- ------ ------- -----------展开代码
注册路由
import Ember from 'ember'; import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; const SignupRoute = Ember.Route.extend(AuthenticatedRouteMixin, { routeAfterAuthentication: 'dashboard' }); export default SignupRoute;
登录控制器
import Ember from 'ember'; import LoginControllerMixin from 'ember-simple-auth/mixins/login-controller-mixin'; const LoginController = Ember.Controller.extend(LoginControllerMixin, { }); export default LoginController;
注册控制器
import Ember from 'ember'; import SignupControllerMixin from 'ember-simple-auth/mixins/signup-controller-mixin'; const SignupController = Ember.Controller.extend(SignupControllerMixin, { }); export default SignupController;
监听 HTTP 响应
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------------------- ---- --------------------------------------------------- ----- ---------------- - ----------------------------------------- - --------------------- ---------- - ------------------------------- ------------------------------- ---------------------------------- ------------------------------------ -- -- --- --- ------ ------- -----------------展开代码
结论
本文介绍了如何在你的 Ember.js 应用中为 Spree 引入身份验证服务和 UI 组件。Spree-Ember-Auth 可以提供身份验证和用户注册的 UI 组件和身份验证服务，为你的应用程序添加身份验证和注册功能，大大减少了你需要编写这些功能的代码量，让你的开发效率更高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a68ccae46eb111f22c
