如何在vuejs中验证后路由到仪表板

npm install vue-router@4 vuex@4

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';

const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('userToken'); // 假设用户登录后存储了token

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});

export default router;

<template>
  <div>
    <h1>Login</h1>
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      // 假设这里是登录逻辑，成功后存储token
      localStorage.setItem('userToken', 'some-auth-token');
      this.$router.push('/dashboard');
    }
  }
};
</script>

<template>
  <div>
    <h1>Dashboard</h1>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
};
</script>