Spring Boot+Vue前后端分离，如何避免前端页面 404
版权申诉
81 浏览量
2021-01-08
14:59:21
上传
评论 1
收藏 86KB PDF 举报
Spring Boot+Vue前后端分离，如何避免前端页面前后端分离，如何避免前端页面 404
问题倒不难，但是这个问题之前被松哥忽略了。前两天有小伙伴提出这个疑问，我觉得有必要写篇文章和大家捋一捋这个问
题。
先来看一个简短的视频：
视频地址
一个简单的配置就解决掉 404 问题了，接下来，我再来把这件事的来龙去脉和大家仔细捋一捋。
1.职责划分职责划分
在传统的前后端不分的开发中，权限管理主要通过过滤器或者拦截器来进行（权限管理框架本身也是通过过滤器链来实现功
能），如果用户不具备某一个角色或者某一个权限，则无法访问某一个页面。
但是在前后端分离中，页面的跳转统统交给前端去做，后端只提供数据，这种时候，权限管理不能再按照之前的思路来。
首先要明确一点，前端是展示给用户看的，所有的菜单显示或者隐藏目的不是为了实现权限管理，而是为了给用户一个良好的
体验（把用户没有权限的按钮隐藏起来，避免用户点击后提示 403，提高用户体验），不能依靠前端隐藏控件来实现权限管
理，即数据安全不能依靠前端。
这就像普通的表单提交一样，前端做数据校验是为了提高效率，提高用户体验，后端才是真正的确保数据完整性。
所以，真正的数据安全管理是在后端实现的，后端在接口设计的过程中，就要确保每一个接口都是在满足某种权限的基础上才
能访问，也就是说，不怕将后端数据接口地址暴露出来，即使暴露出来，只要你没有相应的角色/权限，也是访问不了的。
前端为了良好的用户体验，需要将用户不能访问的接口或者菜单隐藏起来。页面的跳转，按钮的隐藏/展示等等，统统在前端
来实现。
2.存在的问题存在的问题
当前后端分离之后，对于前端所承担的职责，大家可能会面临一个问题：如果用户直接在地址拦输入某一个页面的路径，怎么
办？
此时，如果没有做任何额外的处理的话，用户确实可以通过直接输入某一个路径进入到系统中的某一个页面中，但是，不用担
心数据泄露问题，因为没有相关的角色/权限，就无法访问相关的接口，即使进入到相关的页面，也看不到数据。
但是，如果用户非这样操作，进入到一个空白的页面，用户体验不好，冒出来一个空白页面，有的用户就手足无措了。
此时，我们可以使用 Vue 中的前置路由导航守卫，来监听页面跳转，如果用户想要去一个未获授权的页面，则直接在前置路
由导航守卫中将之拦截下来，重定向到登录页，或者直接就停留在当前页，不让用户跳转，也可以顺手再给用户一点点未获授
权的提示信息。
以 vhr 中的代码为例，我在 main.js 中定义了前置路由导航守卫：
router.beforeEach((to, from, next) => {
if (to.path == '/') {
next();
}else {
if (window.sessionStorage.getItem("user")) {
initMenu(router, store);
next();
}else{
next('/?redirect='+to.path);
}
}
})
这个方法有点类似于 Java 中的过滤器，to 表示要去哪里，有点像 HttpServletResponse；from 表示从哪来，有点像
HttpServletRequest；next 表示一个请求继续向下执行的方法，有点类似于 FilterChain。
这里会监控到所有的页面路由/跳转，主要逻辑是这样：
如果要去的地址是 ‘/’，即要去的地方是登录页面，则直接执行 next 方法表示放行。
如果要去的地址不是 ‘/’，那就要看用户是否登录了，如果已经登录了，则先初始化菜单，然后调用 next 方法继续向下走，想
去哪去哪。
如果没有登录，则调用 next 方法，跳转路径是 ‘/’，即回到登录页面，同时携带上一个 redirect 参数，这个是重定向的地址，
这个参数的作用是这样：例如我本来输入 ‘/aa/bb’，结果因为没有登录，自动跳转到项目登录页面，当我登录成功后，自动跳
回 ‘/aa/bb’。
有这个配置之后，就不怕用户乱跳转了，如果没有登录随意输入一个地址，就会回到登录页面。
评论0