tiny-vue/examples/sites/demos/pc/app/logout/basic-usage.vue

57 lines
1.5 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<p class="status">是否登录{{ isLogin }}</p>
<tiny-logout v-bind="service" :is-local="false" :is-mock="false" :before-logout="beforeLogout"></tiny-logout>
</div>
</template>
<script lang="jsx">
import { Logout, Modal } from '@opentiny/vue'
export default {
components: {
TinyLogout: Logout
},
data() {
return {
isLogin: false,
service: {
getLogoutUrl: this.getLogoutUrl,
isGuestUser: this.isGuestUser,
showLogin: this.showLogin
}
}
},
methods: {
beforeLogout() {
// 注销前的回调函数
Modal.message({ message: '注销前的回调函数', status: 'info' })
},
getLogoutUrl() {
return new Promise((resolve, reject) => {
/* 自定义注销逻辑返回注销完成后的重定向url */
setTimeout(() => {
window.localStorage.setItem('isLogin', false)
const url = window.location.href
resolve(url)
}, 200)
})
},
isGuestUser() {
/* 此处为用户自定义获取当前登录状态未登录为访客返回true,已登录返回false */
this.isLogin = window.localStorage.getItem('isLogin') === 'true'
return !this.isLogin
},
showLogin() {
/* 此处为用户的自定义登录逻辑 */
Modal.confirm('模拟登录且登录成功').then(() => {
window.localStorage.setItem('isLogin', true)
window.location.reload()
})
}
}
}
</script>