Vue实现路由守卫的示例代码

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.meta.requiresAuth && !token) {
    // 需要登录，但没 token，跳转到登录
    next('/login')
  } else {
    next()
  }
})
// 全局后置守卫（一般用来修改标题等）
router.afterEach((to) => {
  document.title = to.meta.title || '默认标题'
})
export default router

{
  path: '/profile',
  component: () => import('@/views/Profile.vue'),
  beforeEnter: (to, from, next) => {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
}

export default {
  name: 'Profile',
  // 进入当前组件之前
  beforeRouteEnter(to, from, next) {
    console.log('即将进入 Profile 页面')
    next()
  },
  // 路由更新（比如 /profile/1 -> /profile/2）
  beforeRouteUpdate(to, from, next) {
    console.log('路由参数变化，更新页面数据')
    next()
  },
  // 离开当前组件时
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('确定要离开吗？未保存的数据会丢失')
    if (answer) {
      next()
    } else {
      next(false) // 阻止导航
    }
  }
}

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token') // 从本地取 token
  if (to.meta.requiresAuth && !token) {
    // 如果需要登录且没有 token，就跳到登录页
    next({ path: '/' })
  } else {
    next() // 其他情况放行
  }
})

// 响应拦截器：统一处理 401
request.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      localStorage.removeItem("token"); // 清除过期 token
      router.push("/"); // 跳转到登录页
    }
    return Promise.reject(error);
  }
);