vue判断没有token就退出到登录页

// 在 Vue 项目中，我们通常会在路由守卫中进行 token 的检查。以下是具体的实现代码：

// main.js 或 router.js 中
import Vue from 'vue';
import Router from 'vue-router';
import store from './store'; // 假设你使用 Vuex 来管理状态
import Login from './views/Login.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue'),
      meta: { requiresAuth: true } // 标记需要登录的页面
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    // 其他路由配置...
  ]
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const token = store.getters['auth/token']; // 从 Vuex 中获取 token

  if (requiresAuth && !token) {
    // 如果目标页面需要认证且没有 token，则重定向到登录页
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 将当前访问路径作为参数传递给登录页
    });
  } else {
    next(); // 否则继续导航
  }
});

export default router;

解释说明：

1. 路由守卫：router.beforeEach 是一个全局前置守卫，在每次路由切换前都会触发。
2. 判断是否需要认证：通过 to.matched.some(record => record.meta.requiresAuth) 检查目标路由是否需要认证。
3. 获取 token：从 Vuex 状态管理中获取 token（假设你使用 Vuex 来管理用户认证状态）。
4. 重定向逻辑：如果目标页面需要认证且没有 token，则重定向到登录页，并将当前访问路径作为参数传递给登录页，以便用户登录后可以返回到原来的页面。
5. 继续导航：如果不需要认证或已经有 token，则继续导航到目标页面。