退出登录的逻辑

Vue3中useRouter和useRoute，容易弄混

Vue3的useRouter和useRoute_useroute userouter_鬼鬼骑士的博客-CSDN博客

退出登录逻辑：

1、点击退出登录以后，向服务器发请求，token失效

2、将仓库中所有和用户相关的数据全部清除

3、跳转到登录页面

4、优化：用户退出登录以后，再次登录，会回到用户之前停留的那个模块而不是首页，这样比较人性化

“退出登录”按钮的回调函数：

//退出登录点击回调
const logout = async () => {//仓库数据全部清除await userStore.userLogout();//跳转到登录页面，并且携带当前所在模块的url参数$router.push({ path: '/login', query: { redirect: $route.path } });}

仓库里面的actions代码： 

async userLogout() {//退出登录请求let result: any = await reqLogout();if (result.code == 200) {//退出登录接口(通知服务器本地用户唯一标识失效)this.token = '';this.username = '';this.avatar = '';REMOVE_TOKEN();return 'ok';} else {return Promise.reject(new Error(result.message));}}

在原来“登录”按钮的回调函数里面加上：

    //判断登录的时候,路由路径当中是否有query参数，如果有就往query参数跳转，没有跳转到首页let redirect: any = $route.query.redirect;$router.push({ path: redirect || '/' });

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！