前端导航守卫

导航守卫

为了解决在地址栏手动输入 /login 才显示登录界面的问题，可以加入导航守卫进行判断。

如何使用导航守卫？请访问 Vue 官网 模板语法 页面，点击顶部栏的“生态系统”找到 Vue Router，跳转页面后点击“入门”。接着在侧边栏中找到“导航守卫”。

全局前置守卫

可以使用 router.beforeEach 注册一个全局前置守卫：

router.beforeEach((to, from) => {
  // 返回 false 以取消导航
  return false;
});

// from 代表从哪里来
// to 代表将要跳转到哪个页面

当一个导航触发时，全局前置守卫按照创建顺序调用。

将上述代码复制到 router/index.ts 中配置导航守卫：

// 全局前置守卫
router.beforeEach((to, from) => {
    if (to.path === '/main') {
        // 判断是否已经登录
        let username = sessionStorage.getItem("username");
        if (username != null) {
            // 已经登录，放行
            return true;
        } else {
            // 未登录，跳转到登录页面
            router.push("/login");
            return false;
        }
    }
});

说明

1. 路由配置：
   • 主界面路由 /main 以及登录页面路由 /login。
2. 全局前置守卫：
   • 使用 router.beforeEach 注册一个全局前置守卫。
   • 检查目标路由是否是 /main，如果是，则判断用户是否已经登录（通过 sessionStorage 检查用户名）。
   • 如果用户已经登录，放行导航；如果用户未登录，跳转到登录页面。

这样，当用户未登录时，任何试图访问 /main 的请求都会被重定向到登录页面，确保用户必须先登录。