Vue路由学习：守卫路由

Vue路由初始化：

import { createRouter, createWebHashHistory } from "vue-router";
// 存储路由的数组
// 创建路由规则
const routes = [
    {
        path: "/",
        alias: '/index',
        component: ()=> import('../router/GoodsView.vue')
    },
    {
        path: "/login",
        component: () => import('../router/Login.vue')
    },
    {
        path: "/register",
        component: () => import('../router/Register.vue')
    },
    {
        path: "/detail/:goodId",
        name: "detail",
        props: true, // 开启参数到属性的映射
        component: () => import('../router/GoodsDetailView.vue')
    }，
    {
        //... 其他路由规则
    }
]

const router = createRouter({
    // 路由模式
    history: createWebHashHistory(),
    // 路由规则
    routes
})

export default router;

main.js文件中使用路由实例。 

import router from '../router/index.js'

const app = createApp(App)

// 使用创建的路由实例
app.use(router)

app.mount('#app')

Vue守卫路由：

Vue Router的导航守卫，也被称为路由守卫或路由拦截，是Vue Router提供的一种机制，主要通过跳转或取消的方式守卫（即控制）导航。这种机制允许开发者在路由发生变化前后执行一些操作，比如验证用户权限、设置标题、发送统计数据等。

Vue Router提供了几种类型的导航守卫，其中最常用的是全局前置守卫beforeEach。以下是一个简单的使用示例：

1. 首先，你需要在Vue项目中定义好你的路由。

const routes = [  
  { path: '/user/:id', component: User },  
  // 其他路由...  
];

2. 设置全局前置守卫：在路由配置文件中（通常是router/index.js），可以使用beforeEach方法来设置全局前置守卫。

router.beforeEach((to, from, next) => {  
  // 假设我们有一个检查用户是否已登录的函数  
  const isAuthenticated = checkUserAuthentication(); // 你的验证逻辑，返回布尔值  
  
  if (to.path !== '/login' && !isAuthenticated) {  
    // 如果用户未登录且目标路由不是登录页面，直接返回登录页面的路径  
    return '/login';  
  }  
  
  // 如果用户已登录或者目标路由是登录页面，不进行拦截，继续导航  
  return true; // 或者不返回任何值，默认会继续导航  
});

beforeEach守卫通过返回登录页面的路径'/login'来重定向未验证的用户。如果用户已通过验证，或者目标路由就是登录页面，则返回true表示允许导航继续（虽然在实际应用中，你通常不需要显式返回true，因为如果不执行任何返回操作，导航将默认继续）

在Vue Router 4（适用于Vue 3）中，返回值的方式是官方推荐的控制导航的方法，因为它更加简洁且易于理解。然而，在Vue Router 3及更早的版本中，你仍然需要使用next函数来控制导航流程。

使用Next函数具体如下：

router.beforeEach((to, from, next) => {  
  // 检查用户是否已登录  
  const isAuthenticated = ...; // 你的验证逻辑  
    
  if (to.path !== '/login' && !isAuthenticated) {  
    // 如果用户未登录且目标路由不是登录页面，则重定向到登录页面  
    next('/login');  
  } else {  
    // 否则，正常导航到目标路由  
    next();  
  }  
});