WeBlog 路由守卫与接口拦截vue-router axios 双保险实现权限控制【免费下载链接】WeBlog Spring Boot Vue 3.2 Vite 4.3 前后端分离个人博客可作为 Java 毕业设计项目~ 感谢点个 Star 呀~项目地址: https://gitcode.com/gh_mirrors/we/WeBlog搭建个人博客权限控制是绕不开的一环后台管理页不能被人随意访问接口也不能被人裸调。今天要介绍的开源项目 WeBlogSpring Boot Vue 3.2 前后端分离博客非常适合当作 Java 毕业设计项目就给出了一个教科书式的答案——前端用vue-router 路由守卫拦页面后端用axios 拦截器 Spring Security拦接口前后端双保险层层设防。为什么需要“双保险”权限控制很多新手只做前端路由判断用v-if藏起管理入口以为就安全了。实际上浏览器里的任何跳转逻辑都能被绕过接口地址直接用 Postman 就能调用。路由守卫负责用户体验接口拦截才负责真正的安全两者缺一不可。第一道保险vue-router 全局前置守卫拦截后台页面WeBlog 的路由定义在 src/router/index.js所有/admin开头的后台页面都挂在统一的 Admin 布局下。而真正的拦截逻辑在独立的 src/permission.js 中通过main.js引入后随应用启动。未登录强制跳转登录页守卫里拿到 Cookie 中的 Token见 src/composables/auth.js一旦发现访问/admin却没有 Token立即弹提示并跳转/login// 未登录强制跳转登录页 if (!token to.path.startsWith(/admin)) { showMessage(请先登录, warning) next({ path: /login }) return }已登录自动拉取用户信息有 Token 就说明登录过此时守卫会自动调用 Vuex 的getAdminInfo拉取用户信息存入全局状态见 src/store/index.js页面刷新后用户状态不丢失。全局后置守卫统一设置页面标题afterEach钩子把每个路由meta.title拼成 xx - WeBlog一行代码搞定所有页面标题配合 NProgress 进度条切换页面时体验非常顺滑。第二道保险axios 请求拦截器统一附加 Token路由守卫管得住页面管不住接口。WeBlog 在 src/axios.js 中封装了 axios 实例请求拦截器在每次发请求前自动读取 Token并写入请求头// 统一添加请求头 Token if (token) { config.headers[Authorization] Bearer token }这样所有业务代码无需关心 Token只要调用封装好的实例鉴权信息自动带上。第三道保险axios 响应拦截器处理 401 统一登出Token 会过期接口会报错响应拦截器就是兜底的那张网。WeBlog 拦截到 401未认证时自动清空用户信息并刷新页面把用户踢回登录页if (status 401 || status 402) { store.dispatch(logout).finally(() location.reload()) }同时对业务错误统一弹窗提示前端无需在每个请求里重复写错误处理。后端加固Spring Security JWT 校验过滤器前端防君子后端防小人。WeBlog 的后端在 WebSecurityConfig.java 中配置了 Spring Security/admin/**下的所有接口必须认证后才能访问其余接口放行。真正干活的是 JWT 模块中的 TokenAuthenticationFilter.java它解析请求头里的Bearer Token校验签名与有效期再把用户信息塞进 SecurityContext供后续接口直接使用。整个链路无 Session、无状态天然适合前后端分离架构。三层防线如何协作一次完整的请求之旅假设你在浏览器里打开后台文章管理页路由守卫放行Token 存在next()放行进入页面页面发起请求axios 请求拦截器自动附带Authorization: Bearer xxx后端校验通过TokenAuthenticationFilter 校验 Token 合法接口返回数据万一 Token 过期后端返回 401axios 响应拦截器触发登出页面自动回到登录页。总结新手搭建博客必须抄的作业WeBlog 这套权限控制方案值得每一位做毕业设计或练手项目的新手借鉴vue-router 守卫管页面跳转axios 拦截器管接口凭证Spring Security 管后端安全。三层各司其职代码量少、逻辑清晰照着 src/permission.js 和 src/axios.js 抄一遍你的博客项目立刻就能拥有完整的前后端权限控制体系。【免费下载链接】WeBlog Spring Boot Vue 3.2 Vite 4.3 前后端分离个人博客可作为 Java 毕业设计项目~ 感谢点个 Star 呀~项目地址: https://gitcode.com/gh_mirrors/we/WeBlog创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考