【vue3+ts后台管理】路由守卫和退出登录

在Vue 3和TypeScript中实现路由守卫和退出登录功能，可以使用Vue Router的全局前置守卫和路由守卫。以下是一个简单的示例：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
// 定义路由
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
  },
  // ...其他路由
];
 
// 创建router实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
 
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查用户是否需要登录才能访问某些路由
  if (to.matched.some(record => record.meta.requiresAuth) && !isUserLoggedIn()) {
    // 如果用户未登录，则重定向到登录页面
    next({ path: '/login', query: { redirect: to.fullPath } });
  } else {
    // 如果用户已登录或不需要登录，继续导航
    next();
  }
});
 
// 检查用户是否登录的函数（示例）
function isUserLoggedIn() {
  // 这里应该是检查用户登录状态的逻辑，例如检查本地存储或者cookie
  return localStorage.getItem('isLoggedIn') === 'true';
}
 
// 退出登录函数
function logout() {
  // 清除用户的登录状态，例如清除本地存储或cookie
  localStorage.removeItem('isLoggedIn');
  // 返回到登录页面或主页
  router.push('/login');
}
 
export default router;

在这个示例中，我们定义了一个isUserLoggedIn函数来检查用户是否登录。实际逻辑应该是检查本地存储或cookie来确定用户的登录状态。同时，我们定义了一个logout函数来处理用户的登出请求，清除登录状态并重定向到登录页面。

在实际应用中，你需要根据自己的应用逻辑来实现isUserLoggedIn和logout函数。这只是一个简单的示例来说明如何在Vue 3和TypeScript中使用Vue Router实现路由守卫和退出登录功能。