网站百度收录变少,网站推广经理招聘,做外贸需要做个英文网站吗,二手商品网站的设计与建设论文近期对前端的路由卫士有了更多的认识。
何为路由守卫#xff1f;这可能是一种约定俗成的名称。就是VUE中的自定义函数#xff0c;用来处理路由跳转。
import { createRouter, createWebHashHistory } from vue-router;const router createRouter({history: cr…近期对前端的路由卫士有了更多的认识。
何为路由守卫这可能是一种约定俗成的名称。就是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这里出了问题导致响应被它拦截了。问AIAI翻来覆去都在扯有没有提交到后端呀后端有没有设置允许跨域呀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使用ApiPostnginx收到的返回消息格式无误 难道是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新开窗口并传参》
