vite2 + vue3 + vue-router4 + vuex4 + element-plus 实战(五)-登录状态及退出登录

登录成功测试

在src/views目录下新建home.vue

home.vue

<template>
  <div v-show="token">
    已登录{{ token }}
  </div>
  <div>
    首页
  </div>
  
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const store = useStore()
    const token = computed(() => {return store.state.user.token})

    return {
      token,
    }
  }
}
</script>

<style>

</style>

修改路由,添加后台首页路由

router/index.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login.vue"),
  },
  {
    path: "/home",
    name: "Home",
    component: () => import("@/views/home.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(), //history模式使用HTML5模式
  routes,
});

export function resetRouter() {
  const newRouter = createRouter({
    history: createWebHistory(),
    routes,
  });

  router.matcher = newRouter.matcher; // reset router
}

// router.beforeEach(async(to, from, next) => {

// })

export default router;

正常访问localhost:3000/home显示：

登录后跳转到/home显示：

退出登录

在home.vue页面添加退出登录按钮

<template>
  <div v-show="token">
    已登录{{ token }}
    <el-button type="primary" @click="logout">退出登录</el-button>
  </div>
  <div>
    首页
  </div>
  
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import Store from '@/store'

export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    const token = computed(() => {return store.state.user.token})

    const logout = async () => {
      await Store.dispatch('user/logout')
      router.push(`/login`)   
    }

    return {
      token,
      logout,
    }
  }
}
</script>

<style>

</style>

点击退出登录后，清除登录状态，跳转到登录页面。