如何解决账号切换失败?
更新时间: 2024/03/05 17:39:34
问题描述
如果您使用了 Vue 框架集成 IM UIKit,在切换账号时可能会切换失败。
问题原因
目前 Vue 框架的 IM UIKit 为单例模式,无法在登出时自动释放内存,可能会导致再次登录时仍为老账号。
解决方案
在调用 logout
登出时手动释放内存,示例代码如下:
<template>
<button @click="login1">用户1</button>
<button @click="login2">用户2</button>
<button @click="logout">退出</button>
<IMApp v-if="uikitInit" />
</template>
<script lang="ts">
import IMApp from "./components/IMApp/index.vue";
import { IMUIKit } from "@xkit-yx/im-kit-ui";
import RootStore from '@xkit-yx/im-store'
import { NimKitCoreFactory, NimKitCoreTypes } from '@xkit-yx/core-kit'
import { app } from "./main";
export default {
name: "App",
components: {
IMApp,
},
data() {
return {
uikitInit: false,
};
},
methods: {
logout() {
// 重新渲染 uikit 页面
this.uikitInit = false;
// 手动释放 uikit 实例内存
window.__xkit_store__.store.destroy();
window.__xkit_store__.nim.destroy();
// 这里根据 sdkVersion 传入 1 或 2
const NIM = NimKitCoreFactory(2)
RootStore.ins = undefined
NIM.ins = undefined
},
login1() {
const initOptions = {
appkey: "", // 请填写你的appkey
account: "", // 请填写你的account
token: "", // 请填写你的token
};
const localOptions = {
// 添加好友模式,默认需要验证
addFriendNeedVerify: true,
// 群组被邀请模式,默认不需要验证
teamBeInviteMode: 'noVerify' as "noVerify" | "needVerify",
// 单聊消息是否显示已读未读 默认 false
p2pMsgReceiptVisible: true,
// 群聊消息是否显示已读未读 默认 false
teamMsgReceiptVisible: true,
// 是否需要@消息 默认 true
needMention: true,
// 是否显示在线离线状态 默认 true
loginStateVisible: true,
// 是否允许转让群主
allowTransferTeamOwner: true,
}
app.config.globalProperties.$uikit = new IMUIKit({
initOptions,
singleton: true,
sdkVersion: 2,
localOptions
});
if (app.config.globalProperties.$uikit) {
this.uikitInit = true;
}
},
login2() {
const initOptions = {
"appkey": "",
"account": "",
"token": "",
};
const localOptions = {
// 添加好友模式,默认需要验证
addFriendNeedVerify: true,
// 群组被邀请模式,默认不需要验证
teamBeInviteMode: 'noVerify' as "noVerify" | "needVerify",
// 单聊消息是否显示已读未读 默认 false
p2pMsgReceiptVisible: true,
// 群聊消息是否显示已读未读 默认 false
teamMsgReceiptVisible: true,
// 是否需要@消息 默认 true
needMention: true,
// 是否显示在线离线状态 默认 true
loginStateVisible: true,
// 是否允许转让群主
allowTransferTeamOwner: true,
}
app.config.globalProperties.$uikit = new IMUIKit({
initOptions,
singleton: true,
sdkVersion: 2,
localOptions
});
if (app.config.globalProperties.$uikit) {
this.uikitInit = true;
}
}
},
mounted() {
},
};
</script>
此文档是否对你有帮助?