vue3导航守卫router.beforeEach

1. 基本介绍

router.beforeEach是一个全局前置守卫,用于在路由导航触发前进行一些权限校验或提示。

定义格式

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

参数解释(参数自定义)

• to：目标路由对象

• form：当前所在路由对象

• next()：控制放行，控制放行到哪个路由

使用场景

1、验证用户是否登录（若未登录，且当前非登录页面，则自动重定向登录页面）；

2、用户权限；

3、用户输入的路路径是否存在，不存在的情况下如何处理，重定向到哪个页面。

2. 基本使用

比如登录场景

配置导航规则

/*router*/
import { createRouter,createWebHashHistory, createWebHistory } from 'vue-router'

/*配置l路由*/
let routes = [
	{
		path: '/',
		name: 'index',
		component: () => import('./index.vue'),
		meta: { // 设置导航守卫
			isLogin: true, // 初始化 login-main.js-meta标志-router.beforeEach判断-放行
		},
		children: [
			{
				path: '/stuAdd',
				name: 'stuAdd',
				meta: {isRole: '销售经理'},
				components: {main: () => import('./components/stuAdd.vue')},
			},
			{
				path: '/stuFind',
				name: 'stuFind',
				meta: {isRole: '销售经理'},
				components: {main: () => import('./components/stuFind.vue')},
			},
			{
				path: '/setting',
				name: 'setting',
				meta: {isRole: '销售员'},
				components: {main: () => import('./components/setting.vue')},
			}
		],
	},
	{
		path: '/loginE',
		name: 'loginE',
		component: () => import('./components/login.vue'),
	},
	{
		path: '/404',
		name: '404',
		component: () => import('./404.vue'),
	},
	{
		path: '/:pathMatch(.*)*',
		redirect: '/404',
	}
]

/*注册路由*/
let router = createRouter({
	routes,
	history: createWebHistory()
})

router.beforeEach((to, from, next) => {
	
	let role = sessionStorage.getItem('role');

	ElMessage.info(role)
	
	console.log(to)
	console.log(from)
	
	if (to.meta.isLogin) {
		if (!role) {
			ElMessage.error("请先登录");
			return next('/loginE');
		}
	}
	
	if (to.meta.isRole) {
		if (role !== to.meta.isRole) {
			ElMessage.error("您不具备该权限");
			return;
		}
	}
	
	next() // 放行 next('/stuAdd') 放行到哪个路由
	
})

createApp(App).use(ElementPlus).use(router).mount('#app')

登录区

<script setup>
	import {reactive} from "vue";
  import {useRouter} from "vue-router";
  
  let use = useRouter(); // 注意变量名和引入的组件名不能一样
	
  let user = reactive({
		  role: '销售员',
  });
  
  let login = () => {
	  if (user.name === "admin" && user.pwd === "admin") {
		  sessionStorage.setItem("role", user.role);
	    use.push("/");
	  }
  }
  
</script>

<template>
	name：<input name="name" type="text" v-model = "user.name">
	pwd: <input name="pwd" type="text" v-model = "user.pwd">
	角色：
	<el-select v-model = "user.role">
		<el-option label = "销售经理" value = "销售经理"></el-option>
		<el-option label = "销售员" value = "销售员"></el-option>
	</el-select>
	<button @click = "login()">登录</button>
</template>

<style scoped>

</style>

首页

<script setup>
	import {CirclePlus, Setting, User} from "@element-plus/icons-vue";
</script>

<template>
	<el-container>
		<el-header>
			这里是头部
		</el-header>
		<el-container>
			<el-aside>
				<el-menu router = "true">
					<el-sub-menu>
						<template #title>
							<el-icon>
								<User/>
							</el-icon>
							<span>客户管理</span>
						</template>
						<el-menu-item index = "/stuAdd">
							<el-icon>
								<CirclePlus/>
							</el-icon>
							添加客户
						</el-menu-item>
						<el-menu-item index = "/stuFind">查询客户</el-menu-item>
					</el-sub-menu>
					<el-menu-item index = "/setting">
						<el-icon>
							<Setting />
						</el-icon>
						系统管理
					</el-menu-item>
					<el-menu-item index = '/loginE'>退出</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view name = "main"></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>


<style scoped>
.el-header {
    background: aquamarine
}
</style>

OK ！！！ 收尾！！！

若有误区或不能解决，私信我，远程协助你！！！