Vue Router 路由守卫

什么是路由守卫

路由守卫是Vue Router提供的一种机制，用于在导航过程中对路由进行控制和管理。通过使用路由守卫，你可以在路由切换前、切换后以及错误处理时执行相应的逻辑。

Vue Router提供了三种类型的路由守卫：
1、全局前置守卫
2、路由独享的守卫
3、组件内的守卫

正如其名， vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说，就是在路由跳转时候的一些钩子，当从一个页面跳转到另一个页面时，可以在跳转前、中、后做一些事情。其实也就是 当你打开一个页面的前后需要去干什么事情。

每个守卫方法接收的三个参数：

• to：即将要进入的目标，是一个路由对象
• from：当前导航正要离开的路由，也是一个路由对象
• next：可选，是一个方法，直接进入下一个路由

你可以使用 router.beforeEach 注册一个全局前置守卫（在进入某个页面之前需要干什么），当一个导航触发时，就会异步执行这个回调函数。

to是指从哪个页面来，from代表从根目录来。to：从哪来  from：到哪去    

全局前置守卫

全局前置守卫（ router.beforeEach）：这些守卫会在路由切换之前被调用，可以用来进行权限验证、登录状态检查等操作。常见的全局前置守卫有beforeEach。

语法 ：

router.beforeEach((to, from, next) => {
  // 在每次路由导航触发前执行的逻辑  
});

 在router/index.js中的具体配置

// index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  // 路由配置
  routes: [
    // ...定义路由...
  ]
});

router.beforeEach((to, from, next) => {
  // 全局前置守卫逻辑
});

export default router;

在上述示例中，我们通过 router.beforeEach 方法注册了一个全局前置守卫。在每次路由导航之前，该守卫会被调用，守卫的回调函数接收三个参数：

• to：即将跳转的目标路由对象
• from：当前导航正要离开的路由对象
• next：用于控制导航行为的回调函数

在守卫的回调函数中，你可以根据业务需求执行相应的操作，如验证用户权限、检查登录状态、取消导航或重定向到其他路由。next 函数用于控制导航的继续或中断。

• 若要中断当前导航并取消跳转，可以调用 next(false)。
• 若要重定向到其他路由，并且希望中断当前导航，可以调用 next('/other-route')。
• 若无需中断导航，则调用 next() 允许导航继续。

全局前置守卫（Global before Guards）可以在以下场景中发挥作用：

• 登录验证：你可以使用全局前置守卫来验证用户是否已登录。通过检查用户的登录状态或者验证用户的身份信息，可以防止未经授权的用户访问需要登录权限的页面。
• 权限控制：全局前置守卫可以用于实现基于角色或权限的访问控制。通过在守卫中检查用户的角色或权限，可以限制用户只能访问其具备权限的页面，并在没有权限时进行相应的处理，如跳转到错误页面或提示无权限信息。
• 路由拦截：在进行路由导航之前，你可以使用全局前置守卫来拦截、修改或重定向导航。根据特定的条件或业务需求，你可以在守卫中对导航进行处理，如取消导航、修改目标路由或跳转到其他页面。
• 数据预处理：有时，在进入某个路由之前，你可能需要对相关数据进行加载、初始化或验证等操作。全局前置守卫可以帮助你在导航发生前执行这些预处理任务，确保数据的准备工作完成后再进入目标路由。

//2.创建路由实例并传递上面路由对象routes
    const router = createRouter({
//路由的一种前端展现方式，通常使用这个就行了
        history: createWebHistory(),
        routes
  }
)

//定义前置路由守卫。进入某个页面之前需要干什么
router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
})

to是一个路由对象，form是从/目录，to是要进入test页面了。 

router.beforeEach((to, from, next) => {
//如果用户访问登录页，直接放行
    if(to.path == '/login') {
        return next()
}

const token = '' //模拟token，正常是从本地cookie或localstorage中获取

if (token) {
    return next() //如果有token，则正常跳转访问
} else {
    return next('/login') //如果没有token，跳转到登录页
}
})

---------------------------------------------------------------------------------------------------------------------------------

一.全局守卫

1.全局前置守卫

语法:

 router.beforeEach((to,from,next)=>{})

参数说明:
to：      进入到哪个路由去
from： 从哪个路由离开
next：  函数，决定是否展示你要看到的路由页面。

示例:
main.js 中设置全局守卫

• 在main.js中，有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。
• 如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。
• 这样就可实现，用户在未登录状态下，展示的一直是登录界面。

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }})