<p>我为Ory Kratos设置流程创建了自己的用户界面。我遇到的问题是，尽管返回的消息显示我的设置已成功更新，但我的新密码没有反映出来，我也没有成功恢复我的账户。以下是我使用Vue 3渲染UI的代码片段。</p> <pre class="brush:js;toolbar:false;">// SettingsVue.vue &lt;template&gt; &lt;div id=&quot;settings&quot;&gt; &lt;HomeTopbar :views=&quot;[]&quot; /&gt; &lt;div class=&quot;settings-wrapper&quot;&gt; &lt;h1 class=&quot;poppins fs_3 fw_6&quot;&gt;恢复您的密码&lt;/h1&gt; &lt;OryFlow v-if=&quot;settingsFlow&quot; :flow=&quot;settingsFlow&quot; title=&quot;登录&quot; form-id=&quot;settings-form&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script setup lang=&quot;ts&quot;&gt; import { ref } from 'vue'; /* ory */ import { injectStrict } from '@/utils'; import { $ory } from '@/plugins/ory'; import { makeHandleGetFlowError } from '@/utils/flows'; /* types */ import type { SelfServiceSettingsFlow } from '@ory/kratos-client'; /* composables */ import { useRoute, useRouter } from 'vue-router'; /* components */ import OryFlow from '@/components/flows/OryFlow.vue'; import HomeTopbar from '@/components/ui/HomeTopbar.vue'; const ory = injectStrict($ory); const route = useRoute(); const router = useRouter(); const settingsFlow = ref&lt;SelfServiceSettingsFlow | undefined&gt;(); const handleGetFlowError = makeHandleGetFlowError(router); // check if we have a flow param const { flow } = route.query; const initializeSelfServiceSettingsFlowForBrowsers = () =&gt; ory .initializeSelfServiceSettingsFlowForBrowsers() .then((response) =&gt; { settingsFlow.value = response.data; router.replace({ query: { flow: response.data.id, }, }); }) .catch(handleGetFlowError); if (typeof flow !== 'string') { // if there's no flow in our route, // we need to initialize our login flow initializeSelfServiceSettingsFlowForBrowsers(); } else { ory .getSelfServiceSettingsFlow(flow) .then((response) =&gt; { settingsFlow.value = response.data; }) .catch(handleGetFlowError); } &lt;/script&gt; &lt;style scoped lang=&quot;scss&quot;&gt; #settings { width: 100%; height: 100%; .settings-wrapper { margin: var(--space-5) auto 0 auto; padding: 0 var(--space-3); margin-top: var(--space-4); width: 300px; } } &lt;/style&gt; </pre> <pre class="brush:js;toolbar:false;">#OryFlow.vue &lt;template&gt; &lt;div class=&quot;ory-flow&quot;&gt; &lt;form :id=&quot;formId&quot; :action=&quot;flow.ui.action&quot; :method=&quot;flow.ui.method&quot;&gt; &lt;OryUiNode v-for=&quot;node in flow.ui.nodes&quot; :key=&quot;getNodeId(node)&quot; :id=&quot;getNodeId(node)&quot; :node=&quot;node&quot; class=&quot;ui-node&quot; /&gt; &lt;/form&gt; &lt;div class=&quot;messages&quot; v-if=&quot;flow.ui.messages&quot;&gt; &lt;OryUiMessage v-for=&quot;message in flow.ui.messages&quot; :message=&quot;message&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script setup lang=&quot;ts&quot;&gt; import type { SelfServiceLoginFlow, SelfServiceRegistrationFlow, SelfServiceRecoveryFlow, SelfServiceSettingsFlow, SelfServiceVerificationFlow, } from '@ory/kratos-client'; import OryUiNode from './OryUiNode.vue'; import OryUiMessage from './OryUiMessage.vue'; import { getNodeId } from '@ory/integrations/ui'; defineProps&lt;{ flow: | SelfServiceLoginFlow | SelfServiceRegistrationFlow | SelfServiceRecoveryFlow | SelfServiceSettingsFlow | SelfServiceVerificationFlow; formId?: string; }&gt;(); &lt;/script&gt; &lt;style scoped lang=&quot;scss&quot;&gt; .ui-node + .ui-node { margin-top: var(--space-2); } .message { margin-top: var(--space-2); } &lt;/style&gt; </pre>

// OryFlow.vue现在支持通过'only'属性进行过滤
<template>
  <div class="ory-flow">
    <form :id="formId"
      :action="flow.ui.action"
      :method="flow.ui.method"
    >
      <OryUiNode v-for="node in nodes"
        :id="getNodeId(node)"
        :key="getNodeId(node)"
        :node="node"
        class="ui-node"
      />
    </form>
    <div v-if="flow.ui.messages"
      class="messages"
    >
      <OryUiMessage v-for="message in flow.ui.messages"
        :key="message.id"
        :message="message"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type {
  SelfServiceLoginFlow,
  SelfServiceRegistrationFlow,
  SelfServiceRecoveryFlow,
  SelfServiceSettingsFlow,
  SelfServiceVerificationFlow,
} from '@ory/kratos-client';
import OryUiNode from './OryUiNode.vue';
import OryUiMessage from './OryUiMessage.vue';
import { getNodeId } from '@ory/integrations/ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  flow:
    | SelfServiceLoginFlow
    | SelfServiceRegistrationFlow
    | SelfServiceRecoveryFlow
    | SelfServiceSettingsFlow
    | SelfServiceVerificationFlow;
  formId?: string;
  only?: string | string[];
}>();

const { flow, only } = toRefs(props);

const nodes = computed(() => {
  if (!only?.value) {
    return flow.value.ui.nodes;
  }

  const onlyArr: string[] = Array.isArray(only.value) ? only.value : [only.value];
  const onlyMap = onlyArr.reduce((acc, curr: string) => {
    acc[curr] = true;
    return acc;
  }, {} as Record<string, boolean>);

  return flow.value.ui.nodes.filter((node) => onlyMap[node.group]);
});
</script>

// SettingsView.vue
<template>
  <div id="settings">
    <HomeTopbar :views="[]" />

    <div class="settings-wrapper">
      <h1 class="poppins fs_3 fw_6">Recover your password</h1>
      <!-- 在这里添加only属性 -->
      <OryFlow v-if="settingsFlow"
        :flow="settingsFlow"
        title="Login"
        form-id="settings-form"
        :only="[ 'password', 'default' ]"
      />
    </div>
  </div>
</template>