Vue Router 路由生命周期钩子/路由导航守卫/路由鉴权

// 引入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 定义路由组件
const Home = () => import('@/components/Home.vue')
const Login = () => import('@/components/Login.vue')
const Secret = () => import('@/components/Secret.vue')
 
// 应用VueRouter插件
Vue.use(VueRouter)
 
// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/secret', component: Secret },
  ]
})
 
// 路由守卫示例：在进入Secret页面前要求用户登录
router.beforeEach((to, from, next) => {
  if (to.path === '/secret') {
    // 假设我们通过检查cookie或localStorage来判断用户是否登录
    const isUserLoggedIn = checkUserLoggedIn(); // 自定义的检查登录状态的函数
    if (!isUserLoggedIn) {
      next('/login'); // 如果未登录，重定向到登录页
    } else {
      next(); // 如果已登录，正常进入Secret页面
    }
  } else {
    next(); // 对于非Secret页面，不做任何操作，直接进入
  }
})
 
// 检查用户是否登录的示例函数
function checkUserLoggedIn() {
  // 实际逻辑可能会有更复杂的判断，比如检查cookie、localStorage或者调用API
  return localStorage.getItem('isLoggedIn') === 'true';
}
 
export default router;

这个代码示例展示了如何在Vue Router中使用路由导航守卫来实现路由鉴权。在进入Secret页面前，它会检查用户是否已经登录。如果用户未登录，则会被重定向到Login页面。这是一个简单的示例，实际应用中鉴权逻辑会更加复杂，可能涉及到cookie、localStorage、sessionStorage或者调用API等。