灏天阁

vue3.2/Vite/Ts34: 退出登录业务

· Yin灏

退出登录

  • src/lauout/tabbar/setting/index.vue
<script setup lang="ts">
  //...
  import { useRouter } from "vue-router";
  $router = useRouter();
  //...
  import useUserStore from "@/store/modules/user";
  let userStore = useUserStore();
  //...
  const logout = () => {
    // 1. 需要向服务器发送请求，告诉服务器 token 过期
    // 2. 用户小仓库中用户相关的数据要清空
    // 3. 跳转到登录页面
    userStore.userLogout();
    // 跳转
    $router.push({
      path: "/login",
    });
  };
</script>

处理退出具体逻辑

  • src/store/modules/user.ts
//...
actions: {
    // 退出登录
    userLogout() {
        this.token = '';
        this.username = '';
        this.avatar = '';
        localStorage.removeItem('TOKEN');
    }
}
//...

体验优化

从哪个页面退出，当再次登录成功的时候，还是要跳转到那个页面

<script setup lang="ts">
  //...
  import { useRouter, useRoute } from "vue-router";
  $router = useRouter();
  //...
  import useUserStore from "@/store/modules/user";
  let userStore = useUserStore();

  // 获取路由对象
  let $route = useRoute();
  //...
  const logout = () => {
    // 1. 需要向服务器发送请求，告诉服务器 token 过期
    // 2. 用户小仓库中用户相关的数据要清空
    // 3. 跳转到登录页面
    userStore.userLogout();
    // 跳转
    $router.push({
      path: "/login",
      query: {
        redirect: $route.path,
      },
    });
  };
</script>

登录的时候获取 url 中的参数，进行对应的跳转

  • src/views/login/index.vue
<script setup lang="ts">
  //...
  import { useRouter, useRoute } from "vue-router";
  //...
  $router = useRouter();
  // 获取路由对象
  let $route = useRoute();
  //...
  const login = () => {
    //...
    let redirect: any = $route.query.redirect;
    $router.push({
      path: redirect || "",
    });
    //...
  };
</script>

路由守卫处理

  1. 登录成功之后就不能访问登录页面
  2. 没登录不能访问首页
  3. 用户数据持久化保存

- Book Lists -