2022-11-15 vue笔记-路由vue-router(四) 路由守卫(又称路由拦截,导航守卫)的定义以及示例

0.路由的概念

路由其实是一种映射关系。

• 生活中的路由：设备和ip的映射关系；
• node.js路由：接口和服务的映射关系；
• （前端）Vue中的路由：路径和组件的映射关系。

1.路由守卫的定义

定义

路由守卫又称导航守卫，指是路由跳转前、跳转中、跳转后过程中的一些钩子函数。

官方解释

vue-router提供的导航守卫，要通过跳转或取消的方式来守卫导航。

路由守卫的分类

全局路由、组件内路由，路由独享。

钩子函数

1.全局路由的钩子函数有：beforeEach、beforeResolve、afterEach（参数中没有next）
2.组件内路由的钩子函数有：beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave
3.路由独享的钩子函数有：beforeEnter

2.路由守卫的使用场景

给路由添加一个权限判断:路由跳转之前，会触发一个函数
场景:用户在登录的状态下就能去到某页面，但是未登录则给你弹出一个未登录的提示。

3.语法:router.beforeEach((to,from,next) => {}

let isLogin = false; //未登录
router.beforeEach((to,from,next) => {
	//路由跳转“之前”先执行这里，决定是否跳转
	if (to.path === '/Login' && isLogin === false) {
		alert("请登录”)
		next(false) //阻止路由跳转
	}else {
		next() //正常放行
	}
});

参数

• to:要跳转到的路由目标
• from:从哪里跳转的路由 （路由对象信息）来源
• next:函数体 必须要next()才会让路由正常地跳转和切换

全局路由在真正跳转之前，会执行一次beforeEach函数，
next调用则跳转，也可以强制修改要跳转的路由。

4.路由守卫示例:(接前例)为点击Center路由的操作判断是否已登录

router.index.js

import vueRouter from "vue-router"
// 引入路由
...
import Login from "@/views/Login"

// 配置路由
// 创建路由对象router
const router = new vueRouter({
    routes: [
    ...
        {
            path: "/Login",
            component: Login
        }

    ],
});
//此处一般用token验证
const checkUser = {
    isLogin() {
        return false;
    }
};
//登陆守卫
router.beforeEach((to, from, next) => {
    console.log(to.path);//输出用户的点击路径
    if (to.path == "/Center") {//点击Center:登录状态检查
        console.log("正在检查登录状态...");;
        if (checkUser.isLogin()) { //是否已登录
            console.log("您已登陆!");
            next(); //登录:放行
        } else {
            console.log("您未登陆!正在跳转到登录页面...");
            next("/Login"); //未登录:跳转至Login页
        }
    } else {//点击别的页面:直接放行
        next();
    }
});
// 导出路由
export default router;

views/Login.vue

<template>
  <div>
    用户名:<input type="text">
    密码:<input type="password">
  </div>
</template>

结果

用户点击一次:个人中心

因没有登录而自动转到Login页面,
若已登录

const checkUser = {
    isLogin() {
        //return false;
        return true;
    }
};

则放行进入Center.页面