退出登录的逻辑

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 || '/' });