Vue
配置Authok
获取应用密钥
你需要如下信息
- Domain
- Client ID
- Client Secret
配置回调URL
配置 Logout URL
安装SDK
npm install @authok/authok-vue
注册插件
import { createAuthok } from '@authok/authok-vue';
const app = createApp(App);
app.use(
createAuthok({
domain: "YOUR_DOMAIN",
client_id: "YOUR_CLIENT_ID",
redirect_uri: window.location.origin
})
);
app.mount('#app');
添加登录
<template>
<div>
<button @click="login">登录</button>
</div>
</template>
<script>
import { useAuthok } from '@authok/authok-vue';
export default {
setup() {
const { loginWithRedirect } = useAuthok();
return {
login: () => {
loginWithRedirect();
}
};
}
};
</script>
使用 Options API
<template>
<div>
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
methods: {
login() {
this.$authok.loginWithRedirect();
}
}
};
</script>
添加退登
<template>
<div>
<button @click="logout">Log out</button>
</div>
</template>
<script>
import { useAuthok } from '@authok/authok-vue';
export default {
setup() {
const { logout } = useAuthok();
return {
logout: () => {
logout({ returnTo: window.location.origin });
}
};
}
};
</script>
使用 Options API
<template>
<div>
<button @click="logout">退登</button>
</div>
</template>
<script>
export default {
methods: {
logout() {
this.$authok.logout({ returnTo: window.location.origin });
}
}
};
</script>
显示用户详情
<template>
<div>
<h2>用户档案</h2>
<button @click="login">登录</button>
<pre v-if="isAuthenticated">
<code>{{ user }}</code>
</pre>
</div>
</template>
<script>
import { useAuthok } from '@authok/authok-vue';
export default {
setup() {
const { loginWithRedirect, user, isAuthenticated } = useAuthok();
return {
login: () => {
loginWithRedirect();
},
user,
isAuthenticated
};
}
};
</script>
使用 Options API
<template>
<div>
<h2>用户档案</h2>
<button @click="login">登录</button>
<pre>
<code>{{ user }}</code>
</pre>
</div>
</template>
<script>
export default {
data: function () {
return {
user: this.$authok.user
};
},
methods: {
login() {
this.$authok.loginWithRedirect();
}
}
};
</script>