@frigear-nu/帐号
主 friger app中的账户区域( profile, security, 文档, API sorders pages)的一个模块. 从
nuxt-frigear-nu是因为 app/pages/account/**。 。 。 .
特征
- QQ 更新您的配置细节( 名称, 化身) .
- 更改您的电子邮件地址 .
- – 更改密码 .
- 管理密码(通过)
@frigear-nu/auth是因为usePasskeys,当WebAuthn被启用时. - * * * 超重可堆肥(
useAccount)和选入配置/安全网页(使用@nuxt/ui) (中文(简体) ). - 🗂️ An
account布局:公共站点内部的设置页面(站点头和页脚保留),以中央max-w-5xl内容栏。 宽屏幕与签名用户一起获得一个左段列表,窄屏幕 aPageSectionSwitcher,两者都从account菜单@frigear-nu/menu(安装时). 加一览 页面列出相同的条目,以及account.overview部件区域( 当@frigear-nu/widget已安装).
此模块是一个UI shell:它拥有没有表格和变异路线. 表格称为自助路线
@frigear-nu/users (单位:千美元)/api/users/me/*和标志性路线 @frigear-nu/auth。 。 。 .
快速设置
用一个命令将模块安装到您的 Nuxt 应用程序 :
npx nuxt module add @frigear-nu/account
此模块需要 @frigear-nu/users 将安装在主机应用程序中,因为其形式称为
自我服务路线在那里.
配置
通过 account 键入 nuxt.config.ts数字 :
export default defineNuxtConfig({
modules: [
'@nuxthub/core',
'@frigear-nu/users',
'@frigear-nu/menu', // optional - enables the account navigation and overview page
'@frigear-nu/account',
],
account: {
settings: {
pages: {
profile: true, // or a custom path, e.g. '/me'
security: true,
// Only registered when `@frigear-nu/menu` is also installed.
index: true,
},
},
},
})
API 路线
这些路线属于 @frigear-nu/users;账户页称:
PATCH /api/users/me- 最新情况name编号 :avatar。 。 。 .PUT /api/users/me/email- 最新情况email(如果已被另一个用户取用,则拒绝).PUT /api/users/me/password- 核实currentPassword更新到newPassword。 。 。 .
这三个系统都需要经过认证的会话,并将更新的用户重新映入其中.
可编曲
const { updateProfileDetails, changeEmailAddress, changePassword, pending, error } = useAccount()
await updateProfileDetails({ name: 'Ada Lovelace' })
await changeEmailAddress({ email: '[email protected]' })
await changePassword({ currentPassword: 'old', newPassword: 'new-password', confirmNewPassword: 'new-password' })
翻译
字符串生活在 account.* 名称空间 da编号 :en 本地化文件并可在您的应用程序中被覆盖
i18n/locales/<code>.json见 文档。 。 。 .
覆盖部分
任意 Account* 组件可以在您的应用程序中被同名组件所取代(模块的优先级较低).
AccountIdentity 在概览摘要卡中显示在用户旁边(默认情况下是给任何人的角色徽章)
不是一个平地 user; 覆盖以显示其他细节, 如成员或身份证。 为了取代整个布局,
定义 app/layouts/account.vue 在您的应用程序中: 它胜过模块的, 并且账户页面仍在其中渲染 。 设定
account.settings.layout: false 完全去除布局,并在应用程序选择的布局中制作页面.
页标题
版式没有标题: 每页都是自己的, 作为根的第一个子
<div class="flex flex-col gap-4">。模块的页面使用 AccountHeader页:1 PageHeading 标题是页面
title mata, 否则标签为 account 菜单项目; 描述来自相同的
项目,以及 #actions 正在通过(API 令牌的一页将“创造 API 令牌”放在那里)。 添加其他模块
下级 /account 产生 PageHeading 以相同的 i18n 键作为其菜单项.