构建会员专区

在本教程中，你将为站点打造自己的会员体系。访客创建账户，用密码或登录链接登录，然后进入一个对其他人关闭的页面。你还会添加一个角色，为拥有该角色的访客显示额外内容。你需要一个带首页的站点；访客账户保存在站点自己的数据库中。

添加页面

1. 创建三个页面

   打开左侧边栏的 Pages 标签页，点击三次 +（Add page）。把页面分别命名为 Sign up、Log in 和 Members。

2. 设置它们的路径

   打开每个页面，点击画布的空白处以取消所有选择，然后在页面设置中设置 Path：/signup、/login 和 /members。

构建注册表单

1. 插入表单

   在 Sign up 页面上，在 Layers 标签页中点击 +，选择 Form。它自带一个 Email 输入框、一个留言文本区域、一个 Send 按钮和两个状态框架。

2. 关闭内置的提交记录

   选中表单，在 Form 分区中把 Action 设为 Do nothing。提交将由你的工作流处理，而不是 Forms 收件箱。

3. 调整字段

   删除留言文本区域。在表单中插入两个 Input 元素：一个的 Name 为 name、Label 为 Your name；另一个的 Name 为 password、Label 为 Password、Type 为 Password。选中按钮，把它的 Text 改为 Create account。

4. 把字段连接到变量

   选中每个输入框，在 Field 分区中点击 Value 旁的 +（Create variable）。输入框与新建的页面变量保持同步，所以表单的值可以通过 vars.email、vars.password 和 vars.name 使用。

为访客注册

1. 添加提交工作流

   选中表单，在检查器中打开 Events，保持选中 Submit，点击 Add workflow。Logic 工作区会打开这个新工作流。

2. 创建账户

   点击 Add step，在 Visitor auth 下选择 Sign up visitor。对于 Email，点击 ƒ 按钮（Use an expression），输入 vars.email。对 Password 用 vars.password、对 Name 用 vars.name，做同样的操作。

3. 跳转到会员页面

   点击 Add step，选择 Go to page，把 Destination 设为 Members。这个步骤只在注册成功时运行。

4. 显示出错原因

   在 On error 下点击 Add error handler，然后点击 Add error step 并选择 Show toast。把 Message 设为表达式 error.message，Variant 设为 Error。这样，用已有账户的邮箱注册的访客就能看到原因。

构建登录页面

1. 复制表单

   用 ⌘C 复制注册表单，打开 Log in 页面，用 ⌘V 粘贴。删除姓名输入框，把按钮文字改为 Log in。像之前一样，把邮箱和密码输入框连接到此页面上的新变量。

2. 让访客登录

   为表单添加一个 Submit 工作流。添加 Log in visitor，Email 为 vars.email，Password 为 vars.password，然后添加 Go to page，目标为 Members。在 On error 下添加同样的错误提示消息。

3. 提供登录链接

   在表单下方添加一个 Button，文字为 Email me a sign-in link，并把它的 Type 设为 Button，这样它不会提交表单。在 Events 中添加一个 Click 工作流，包含 Send sign-in link（Email 为 vars.email）和一个显示 Check your inbox 的 Show toast。

关闭会员页面

1. 限制页面访问

   打开 Members 页面，点击画布的空白处。在 Access 分区中打开 Restrict。Rule 默认为 user.isLoggedIn，正是这里需要的。

2. 把访客带到登录页面

   把 Otherwise 设为 Log in 页面。未登录的访客会被重定向到那里；如果没有设置重定向页面，他们会看到 404。

3. 问候访客

   添加一个 Text 元素。在 Typography 中，点击 Content 旁的花括号按钮（Bind Text），输入 'Welcome, ' + user.name。

4. 添加退出按钮

   添加一个文字为 Log out 的 Button。为它添加一个 Click 工作流，包含 Log out visitor，然后是目标为首页的 Go to page。

添加高级会员角色

1. 创建角色

   从左侧边栏底部打开 Tables 工作区，选择 Visitors。在 New role 中输入 premium，点击 Add role。角色名可使用小写字母、数字、_ 和 -。

2. 只向高级会员显示内容

   在 Members 页面上，添加一个框架，放入一段简短的高级会员信息。在 Visibility 中，把 Show when 绑定到 user.roles.includes('premium')。

3. 无需刷新即可获取角色变化

   添加一个文字为 Refresh my access 的 Button，并添加一个包含 Refresh user 的 Click 工作流。它会从服务端重新加载 user，所以在访客停留在页面上时分配的角色会立即生效。

发布并测试

1. 发布到预发布环境

   点击工具栏中的 Publish，保持选中 Staging 并确认。

2. 试试受限页面

   在预发布地址上打开 /members。因为你还没有登录，会被带到登录页面。

3. 注册

   打开 /signup，创建一个账户，确认会员页面用你的名字问候你。点击 Log out，再在 /login 上重新登录。

4. 把自己设为高级会员

   回到编辑器，打开 Tables → Visitors。你的账户就在列表中。点击它，在侧边面板中勾选 premium，然后在预发布页面上点击 Refresh my access。高级会员信息就会出现。

你学到了什么

• 访客认证步骤可以让访客注册、登录和退出，发送登录链接，并刷新 user。
• 页面访问规则在服务端对每个请求运行，并重定向不满足规则的访客。
• user 始终是一个对象；请判断 user.isLoggedIn 和 user.roles.includes(…)。
• 角色在 Tables → Visitors 中定义和分配。

继续学习后面的教程，或阅读本教程背后的指南：