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
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:
<pre>
<code className="language-ts">
{`import { useLogto } from "@logto/vue";
<code className="language-html">
{`<script setup lang="ts">
import { useLogto } from "@logto/vue";
const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`}
const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');
</script>`}
</code>
</pre>
```html
<div v-if="isAuthenticated">
<div>Signed in</div>
</div>
<div v-else>
<button @click="onClickSignIn">Sign In</button>
</div>
<template>
<div v-if="isAuthenticated">
<div>Signed in</div>
</div>
<div v-else>
<button @click="onClickSignIn">Sign In</button>
</div>
</template>
```
### 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:
```ts
// CallbackView.vue
import { useHandleSignInCallback } from '@logto/vue';
const { isLoading } = useHandleSignInCallback(() => {
// Navigate to root path when finished
});
```html
<!-- CallbackView.vue -->
<script setup lang="ts">
import { useHandleSignInCallback } from '@logto/vue';
const { isLoading } = useHandleSignInCallback(() => {
// Navigate to root path when finished
});
</script>
```
```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
<pre>
<code className="language-ts">
{`import { useLogto } from "@logto/vue";
<code className="language-html">
{`<script setup lang="ts">
import { useLogto } from "@logto/vue";
const { signOut } = useLogto();
const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
const { signOut } = useLogto();
const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');
</script>`}
</code>
</pre>
```html
<button @click="onClickSignOut">Sign Out</button>
<template>
<button @click="onClickSignOut">Sign Out</button>
</template>
```
</Step>

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

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