vue的路由守卫逻辑处置惩罚不当导致部署在nginx上无法捕获后端异步响应消息 ...

近期对前端的路由卫士有了更多的认识。
何为路由守卫？这可能是一种约定俗成的名称。就是VUE中的自定义函数，用来处置惩罚路由跳转。

1. import { createRouter, createWebHashHistory } from "vue-router";
3. const router = createRouter({
4.   history: createWebHashHistory(),
5.   routes,
6. });
8. // 路由守卫
9. router.beforeEach((to, from, next) => {
10.         。。。
11. });

复制代码

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

我有个vue3开发的前端程序，在开发环境中运行正常，但当部署到nginx后，页面一片空白。这种空白，是完全的空白，鼠标右键无反应，开发者工具的控制台、network没有任何输出。在代码中插入alert()函数，没有任何反应。感觉就是叫天不应，呼地不灵。开发和调试，最怕就是这种情况了，没有任何东西输出，就不知道题目出在哪里，狗咬乌龟，无处下牙。
这个前端程序，逻辑是在路由守卫中，跳转之前，当发现没有登录，就向后端发出请求，这样后端确认没有登录，就返回一个json对象，里面有个状态码：202，前端根据这个这个响应，跳到单点登录CAS。前端通过axios接管了请求和处置惩罚后端返回的响应，是添加请求拦截器和响应拦截器的方式。
既然前后端代码没有动过，那首先就怀疑是不是nginx这里出了题目，导致响应被它拦截了。问AI，AI翻来覆去都在扯有没有提交到后端呀？后端有没有设置答应跨域呀？nginx是否答应了跨域呀？后端的返回，前端能不能正确辨认呀？一想到后端使用了CAS的客户端，我就心生恐惧，这鬼东西，谁看得懂？
调试后端，请求正确无误地通报到了后端，后端也确实正确返回了。

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

复制代码

看nginx日记，确实收到了后端的返回消息

1. 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。

1. const getService = (config) => {
2.   const service = axios.create(config);
4.   // 添加请求拦截器
5.   service.interceptors.request.use(onRequest, onReqError);
6.   // 添加响应拦截器
7.   service.interceptors.response.use(onResponse, onResError);
9.   return service;
10. };

复制代码

1天时间快已往了。末了我想，估计是前端代码有题目。眼光落在路由卫士上，将向后端请求的逻辑从路由卫士中移除，重新部署到nginx，结果各种alert一下子就弹出来了。路由卫士嘛，只管跳转就行了，搞那么多逻辑判定，甚至向后端请求数据干啥？开发环境不出题目，可能是开发环境的容错性比较好，nginx可没惯着我。
路由守卫如下，原先验证权限函数hasAuthority(to.meta.access)中会向后端发出请求，修改后去掉就正常了。

1. // 路由守卫
2. let registerRoute = false; //是否已装配动态路由
3. router.beforeEach((to, from, next) => {
4.   const path = getPath(to);
5.   if (!registerRoute) {
6.     routeAssembler(router, () => {
7.       registerRoute = true;
8.       if (path !== to.path) {
9.         to.path = path;
10.       }
11.       next({ ...to, replace: true });
12.     });
13.   } else {
14.     if (path !== to.path) {
15.       next(path);
16.     } else {
17.       next();
18.     }
19.   }
20. });
22. function getPath(to) {
23.   let path = to.path;
25.   if (needLogin) {
26.     if (path !== "/afterLogin") {
27.       if (!isLogined()) {
28.         path = "/";
29.       } else {
30.         const isAccess = hasAuthority(to.meta.access);//验证权限
31.         if (!isAccess && path !== "/notAllow") {
32.           path = "/notAllow";
33.         }
34.       }
35.     }
36.   }
38.   return path;
39. }

复制代码

2、不能重复跳转

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

1. if(to.path !== "/notAllow"){
2.         next("/notAllow");
3. } else {
4.         next();
5. }

复制代码

3、router.push(path)

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

1. import { createRouter, createWebHashHistory } from "vue-router";
3. const router = createRouter({
4.   history: createWebHashHistory(),
5.   routes,
6. });
8. // 路由守卫
9. router.beforeEach((to, from, next) => {
10.         。。。
11. });

复制代码

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

1. import { useRouter } from 'vue-router';
3. const router = useRouter();
5. router.push('/map');

复制代码

4、假如是新开窗口

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。