CALL API
------------------------------------
href="https://.com//-web-js/tree///vuejs/with-ord"
=""
rel="">
View the code on
Vue Demo app. Made with
然后在内部 /src/views/.vue，我们将使用中的 配方公开的方法检查用户是否已通过身份验证。-web-js
我们为经过身份验证的用户呈现一个注销按钮，其中包含有关他们会话的信息。当用户单击此按钮时，我们调用清除用户会话的方法。-web-js,
对于未经身份验证的用户，我们可以将他们重定向到/auth页面。
对于/auth路由，如果会话已经存在，我们会将用户重定向到主页：
: async () {
if (await .()) {
// since a , we the user to the .vue
..("/");
},
最后，要加载组件，"/"我们将更新/src//index.ts文件：
const = ({
: (.meta.env.),
: [
path: "/",
name: "home",
: () => ,
},
// ...
],
});
;
如果您现在在身份验证后访问这里，您应该会看到以下页面：
登录后的主页视图
忘记密码流程
在登录 UI 中，我们有一个指向忘记密码页面的链接。用户可以输入他们的电子邮件并在此页面的收件箱中接收密码重置链接。当他们访问该链接时，他们可以在该页面上输入新密码以更改密码。
首先，我们将在内部创建 HTML 模板 /src/html/.html。这是您可以使用的示例。
我们将在/src/views/.vue文件中创建一个组件，我们将在其中呈现上述模板：
在 HTML 模板中，我们根据名为 的变量有条件地呈现表单，该变量是一个状态变量，表示是否已生成密码重置令牌。此变量是根据页面 URL 的查询参数中存在的令牌设置的。如果用户点击了忘记密码按钮（在登录页面上），则页面 URL 的查询参数中不存在令牌；因此变量设置为false。
由于 false，我们呈现表单，用户将在其中输入他们的电子邮件以获取重置密码链接。当用户在此表单上输入他们的电子邮件并提交时，我们调用il方法 -web-js并传入他们的电子邮件。如果该电子邮件存在于 中，此函数与后端 API 交互以向用户的电子邮件发送密码重置链接。
密码重置链接就像:3000/auth/reset-?token=....&rid=ord. 此链接与忘记密码页面的路径相同；但是，由于 URL 具有token查询参数，它应该呈现用户可以输入新密码的表单。
当他们在表单中输入新密码时，我们使用新密码调用该函数。该函数会自动从 URL 中读取令牌并调用 后端 API 来更改用户的密码。
如果密码重置令牌已被使用或已过期，函数调用将返回非"OK"状态，然后我们可以在 UI 上显示消息以提示用户返回登录屏幕。
如果该功能成功，则表示用户密码已成功重置，我们将用户重定向回该/auth页面，以便他们现在可以使用新密码登录。
要在 route 上加载组件/auth/reset-，我们将在/src//index.ts文件中进行以下更改：
const = ({
: (.meta.env.),
: [
// ...
path: "/auth/reset-",
name: "",
: () => ,
},
],
});
完成此操作后，如果您现在访问site，您应该会看到以下页面：
忘记密码输入邮箱
如果您输入您的电子邮件并按“给我发送电子邮件”按钮，您应该会在输入的电子邮件中收到一个重置密码的链接：
重置密码链接收件箱
点击链接后，您可以输入新密码并点击“更改密码”按钮更新密码：
重设密码
核心设置
在进行后端设置时，我们将"https://try..com"其用作核心。这是一个由 团队托管的演示核心实例。您可以随意使用它，但是当您致力于使用 时，您应该切换到核心的自托管或托管版本。
结论
我们使用-web-jsSDK 为 Vue 应用程序添加电子邮件密码、社交身份验证和忘记密码功能。