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新开窗口并传参》