Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

docs(console): improve code sample in vue tutorial (#1519)

Browse source
This commit is contained in:
IceHe.xyz 2022-07-12 15:42:33 +08:00 committed by GitHub
parent 14b049a8b5
commit b4c202275b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
View file

@ -88,26 +88,30 @@ First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`.
### Implement a sign-in button ### Implement a sign-in button
We provide two composables `useHandleSignInCallback()` and `useLogto()`, which can help you easily manage the authentication flow. We provide two composables `useHandleSignInCallback()` and `useLogto()`, which can help you easily manage the authentication flow.
Go back to your IDE/editor, use the following code to implement the sign-in button: Go back to your IDE/editor, use the following code to implement the sign-in button:
<pre> <pre>
<code className="language-ts"> <code className="language-html">
{`import { useLogto } from "@logto/vue"; {`<script setup lang="ts">
import { useLogto } from "@logto/vue";
const { signIn, isAuthenticated } = useLogto(); const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`} const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');
</script>`}
</code> </code>
</pre> </pre>
```html ```html
<div v-if="isAuthenticated"> <template>
<div>Signed in</div> <div v-if="isAuthenticated">
</div> <div>Signed in</div>
<div v-else> </div>
<button @click="onClickSignIn">Sign In</button> <div v-else>
</div> <button @click="onClickSignIn">Sign In</button>
</div>
</template>
``` ```
### Handle redirect ### Handle redirect
@ -116,12 +120,14 @@ We're almost there! In the last step, we use `http://localhost:1234/callback` as
First let's create a callback component: First let's create a callback component:
```ts ```html
// CallbackView.vue <!-- CallbackView.vue -->
import { useHandleSignInCallback } from '@logto/vue'; <script setup lang="ts">
const { isLoading } = useHandleSignInCallback(() => { import { useHandleSignInCallback } from '@logto/vue';
// Navigate to root path when finished const { isLoading } = useHandleSignInCallback(() => {
}); // Navigate to root path when finished
});
</script>
``` ```
```html ```html
@ -165,16 +171,20 @@ After signing out, it'll be great to redirect user back to your website. Let's a
### Implement a sign-out button ### Implement a sign-out button
<pre> <pre>
<code className="language-ts"> <code className="language-html">
{`import { useLogto } from "@logto/vue"; {`<script setup lang="ts">
import { useLogto } from "@logto/vue";
const { signOut } = useLogto(); const { signOut } = useLogto();
const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`} const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');
</script>`}
</code> </code>
</pre> </pre>
```html ```html
<button @click="onClickSignOut">Sign Out</button> <template>
<button @click="onClickSignOut">Sign Out</button>
</template>
``` ```
</Step> </Step>

52
packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
View file

@ -93,21 +93,25 @@ app.mount("#app");`}
返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮： 返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
<pre> <pre>
<code className="language-ts"> <code className="language-html">
{`import { useLogto } from "@logto/vue"; {`<script setup lang="ts">
import { useLogto } from "@logto/vue";
const { signIn, isAuthenticated } = useLogto(); const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`} const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');
</script>`}
</code> </code>
</pre> </pre>
```html ```html
<div v-if="isAuthenticated"> <template>
<div>已登录</div> <div v-if="isAuthenticated">
</div> <div>已登录</div>
<div v-else> </div>
<button @click="onClickSignIn">登录</button> <div v-else>
</div> <button @click="onClickSignIn">登录</button>
</div>
</template>
``` ```
### 处理重定向 ### 处理重定向
@ -116,12 +120,14 @@ const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost
首先，让我们来创建一个 Callback 组件： 首先，让我们来创建一个 Callback 组件：
```ts ```html
// CallbackView.vue <!-- CallbackView.vue -->
import { useHandleSignInCallback } from '@logto/vue'; <script setup lang="ts">
const { isLoading } = useHandleSignInCallback(() => { import { useHandleSignInCallback } from '@logto/vue';
// 完成时跳转至根路由 const { isLoading } = useHandleSignInCallback(() => {
}); // 完成时跳转至根路由
});
</script>
``` ```
```html ```html
@ -165,16 +171,20 @@ const router = createRouter({
### 实现退出登录按钮 ### 实现退出登录按钮
<pre> <pre>
<code className="language-ts"> <code className="language-html">
{`import { useLogto } from "@logto/vue"; {`<script setup lang="ts">
import { useLogto } from "@logto/vue";
const { signOut } = useLogto(); const { signOut } = useLogto();
const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`} const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');
</script>`}
</code> </code>
</pre> </pre>
```html ```html
<button @click="onClickSignOut">退出登录</button> <template>
<button @click="onClickSignOut">退出登录</button>
</template>
``` ```
</Step> </Step>