近期对前端的路由卫士有了更多的认识。
何为路由守卫？这可能是一种约定俗成的名称。就是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新开窗口并传参》
