从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十四之配置路由导航守卫防止未登录用户访问受保护页面

本节学习目标

vue-router路由导航守卫原理及其在项目中的应用。

遗留问题

目前系统有一个问题，就是在用户未成功登录的情况下，用户可以访问后台主页。我们的系统需要实现鉴权功能，即在用户未成功登录的前提下，不能访问系统中的受保护页面。具体做法是通过vue-router路由导航守卫功能配合查询pinia的store中是否包含用户信息，以及配合路由配置的meta属性中是否指定了requiresAuth属性。具体参见后面代码。

配置路由导航守卫

import { useUserStore } from '@/stores/user';

受保护的路由配置

验证测试

如果已登录，点击右上角菜单layout，然后输入首页地址：

http://localhost:3000/#/

会发现页面被引导到登录页面。