当前位置: 首页 > article >正文

vue的路由守卫逻辑处理不当导致部署在nginx上无法捕捉后端异步响应消息等问题

近期对前端的路由卫士有了更多的认识。

何为路由守卫?这可能是一种约定俗成的名称。就是VUE中的自定义函数,用来处理路由跳转。

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守卫
router.beforeEach((to, from, next) => {
	。。。
});

1、不要在路由守卫中向后端提交,尤其是异步提交

我有个vue3开发的前端程序,在开发环境中运行正常,但当部署到nginx后,页面一片空白。这种空白,是完全的空白,鼠标右键无反应,开发者工具的控制台、network没有任何输出。在代码中插入alert()函数,没有任何反应。感觉就是叫天不应,呼地不灵。开发和调试,最怕就是这种情况了,没有任何东西输出,就不知道问题出在哪里,狗咬乌龟,无处下牙。

这个前端程序,逻辑是在路由守卫中,跳转之前,当发现没有登录,就向后端发出请求,这样后端确认没有登录,就返回一个json对象,里面有个状态码:202,前端根据这个这个响应,跳到单点登录CAS。前端通过axios接管了请求和处理后端返回的响应,是添加请求拦截器和响应拦截器的方式。

既然前后端代码没有动过,那首先就怀疑是不是nginx这里出了问题,导致响应被它拦截了。问AI,AI翻来覆去都在扯有没有提交到后端呀?后端有没有设置允许跨域呀?nginx是否允许了跨域呀?后端的返回,前端能不能正确识别呀?一想到后端使用了CAS的客户端,我就心生恐惧,这鬼东西,谁看得懂?

调试后端,请求正确无误地传递到了后端,后端也确实正确返回了。

response.getWriter().write("{\"code\":202, \"msg\":\"no ticket and no assertion found,you shit\"}");

看nginx日志,确实收到了后端的返回消息

127.0.0.1 - - [07/Jan/2025:15:37:00 +0800] "POST /api/api/auth/logout HTTP/1.1" 200 63 "http://localhost:8080/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0"

使用ApiPost,nginx收到的返回消息,格式无误
在这里插入图片描述
难道是axios的响应拦截器有问题?这东西怎么搞。更何况,这么成熟的东西,不可能有什么低级BUG。

const getService = (config) => {
  const service = axios.create(config);

  // 添加请求拦截器
  service.interceptors.request.use(onRequest, onReqError);
  // 添加响应拦截器
  service.interceptors.response.use(onResponse, onResError);

  return service;
};

1天时间快过去了。最后我想,估计是前端代码有问题。眼光落在路由卫士上,将向后端请求的逻辑从路由卫士中移除,重新部署到nginx,结果各种alert一下子就弹出来了。路由卫士嘛,只管跳转就行了,搞那么多逻辑判断,甚至向后端请求数据干啥?开发环境不出问题,可能是开发环境的容错性比较好,nginx可没惯着我。

路由守卫如下,原先验证权限函数hasAuthority(to.meta.access)中会向后端发出请求,修改后去掉就正常了。

// 路由守卫
let registerRoute = false; //是否已装配动态路由
router.beforeEach((to, from, next) => {
  const path = getPath(to);
  if (!registerRoute) {
    routeAssembler(router, () => {
      registerRoute = true;
      if (path !== to.path) {
        to.path = path;
      }
      next({ ...to, replace: true });
    });
  } else {
    if (path !== to.path) {
      next(path);
    } else {
      next();
    }
  }
});

function getPath(to) {
  let path = to.path;

  if (needLogin) {
    if (path !== "/afterLogin") {
      if (!isLogined()) {
        path = "/";
      } else {
        const isAccess = hasAuthority(to.meta.access);//验证权限
        if (!isAccess && path !== "/notAllow") {
          path = "/notAllow";
        }
      }
    }
  }

  return path;
}

2、不能重复跳转

路由守卫中,如果目的路径原本就是指定的跳转路径,那么不加辨别,强行跳转,系统会被堵塞,可能造成页面一片空白。比如
原本to.path === “/notAllow”,你现在又要next(“/notAllow”),就不行了。应该是这样

if(to.path !== "/notAllow"){
	next("/notAllow");
} else {
	next();
}

3、router.push(path)

注意next只是路由守卫中作为参数传过来的方法名,vue中没有一个叫next的方法。

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守卫
router.beforeEach((to, from, next) => {
	。。。
});

那么在页面中,我们怎么跳转呢,可以这样:

import { useRouter } from 'vue-router';

const router = useRouter();

router.push('/map');

4、如果是新开窗口

请参见拙作《vue3新开窗口并传参》


http://www.kler.cn/a/488517.html

相关文章:

  • .NET体系架构
  • 51单片机(一) keil4工程与小灯实验
  • 《深度学习模型在鸿蒙分布式框架下的跨设备高效之旅》
  • Effective C++读书笔记——item13(使用对象管理资源)
  • 爬虫学习记录
  • Flutter:封装一个自用的bottom_picker选择器
  • Docker与GitHub的完美结合:6种实用方法
  • 如何搭建appium工具环境?
  • 使用 Multer 上传图片到阿里云 OSS
  • 【NLP 19、词的向量化和文本向量化】
  • 初识MySQL · 数据库
  • 模式识别与机器学习
  • 多类特征(Multiple features)
  • 什么是端口
  • Python 数据建模完整流程指南
  • LeetCode LCP17速算机器人
  • Python标准库之SQLite3
  • 【再谈设计模式】模板方法模式 - 算法骨架的构建者
  • 【游戏设计原理】53 - 解决问题的障碍
  • SOLID原则学习,接口隔离原则
  • AI赋能服装零售:商品计划智能化,化危机为转机
  • SQL Server查询计划操作符——查询计划相关操作符(3)
  • 【HTML+CSS+JS+VUE】web前端教程-16-HTML5新增标签
  • C#Halcon找线封装
  • 关于地平线开发板使用nhwc格式的前向传播输出格式的理解
  • 【FlutterDart】tolyui_feedback组件例子效果(23 /100)