Vue3版JeecgBoot项目实战：5分钟搞定前台官网的免登录访问（附完整路由与白名单配置）

Vue3版JeecgBoot项目实战5分钟实现官网免登录访问全流程指南在开发企业官网、产品展示页等公开项目时强制用户登录才能访问往往会造成用户体验断层。作为基于Vue3的JeecgBoot开发者你可能遇到过这样的困扰官网文档对免登录配置的说明较为分散而业务又急需快速上线公开页面。本文将带你用最短时间打通前后端配置链路实现真正的开箱即用级免登录访问。1. 前端工程配置实战1.1 创建公开页面模板首先在/src/views/public目录下新建展示页面以产品首页为例template div classpublic-container header classproduct-banner h1{{ productName }}/h1 /header main ProductFeature / ClientCases / /main /div /template script setup langts const productName 智能管理平台 /script style scoped .public-container { max-width: 1200px; margin: 0 auto; } /style关键细节使用scoped样式避免污染全局组件命名建议采用PascalCase规范静态资源建议放在/public目录1.2 动态路由注册方案在/src/router/routes/public.ts中创建独立路由模块export const PublicRoutes: AppRouteRecordRaw[] [ { path: /product, name: ProductHome, component: () import(//views/public/ProductHome.vue), meta: { title: 产品首页, ignoreAuth: true // 关键标识 } }, { path: /solution, name: SolutionPage, component: () import(//views/public/Solution.vue), meta: { title: 解决方案, ignoreAuth: true } } ]然后在主路由文件/src/router/routes/index.ts中合并路由import { PublicRoutes } from ./public export const basicRoutes [ ...PublicRoutes, LoginRoute, // ...其他基础路由 ]1.3 白名单深度配置在权限守卫文件/src/router/guard/permissionGuard.ts中需要处理两种场景路径白名单/src/router/guard/paramMenuGuard.ts:const whitePathList [ PageEnum.BASE_LOGIN, /product, /solution, /contact ]路由元信息校验推荐方案router.beforeEach(async (to) { if (to.meta.ignoreAuth) { return true // 放行标记路由 } // ...正常权限校验 })常见问题排查热更新后路由未生效尝试清除路由缓存嵌套路由需为每个子路由单独设置ignoreAuth动态路由需要通过addRoute手动注册2. 后端接口放行策略2.1 安全接口配置原则在后端jeecg-system-module中找到权限配置类添加放行规则Configuration public class WebSecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers( /api/product/**, /api/solution/list, /api/public/** ).permitAll() // ...其他配置 } }安全建议使用/**匹配多级路径时要谨慎公开接口建议统一前缀如/api/public生产环境应配置速率限制2.2 Swagger文档特殊处理如需开放API文档访问需额外配置jeecg: swagger: enable: true auth: false # 关闭鉴权 paths: /v2/api-docs,/webjars/**2.3 接口缓存优化方案对于高频访问的公开接口建议添加缓存注解GetMapping(/api/product/list) Cacheable(value productCache, key all) public ResultListProductVO getProductList() { // ... }3. 全链路调试技巧3.1 前端调试工具使用Vue Devtools检查路由元信息是否正确传递网络请求是否携带多余认证头组件是否被keep-alive意外缓存调试命令示例# 查看路由树 console.log(router.getRoutes()) # 检查当前路由守卫 router.beforeHooks.forEach(hook { console.log(hook.toString()) })3.2 后端请求追踪在application-dev.yml中开启SQL日志logging: level: org.hibernate.SQL: debug org.hibernate.type: trace3.3 跨环境配置管理建议使用环境变量区分配置# .env.production VITE_PUBLIC_PATHS/product,/solution # .env.development VITE_PUBLIC_PATHS/product,/solution,/debug然后在vite配置中注入whitePathList: import.meta.env.VITE_PUBLIC_PATHS.split(,)4. 高级应用场景4.1 混合权限页面方案对于部分内容需要鉴权的页面可采用条件渲染template div PublicHeader / template v-if!userStore.getToken GuestContent / /template template v-else MemberContent / /template /div /template4.2 静态资源CDN优化在vite.config.ts中配置生产环境CDNbuild: { assetsDir: static, rollupOptions: { output: { chunkFileNames: static/js/[name]-[hash].js, assetFileNames: static/[ext]/[name]-[hash].[ext] } } }4.3 性能监控接入使用Sentry监控公开页面性能import * as Sentry from sentry/vue app.use(Sentry, { dsn: your_dsn, tracesSampleRate: 0.2, beforeSend(event) { if (event.request?.url.includes(/product)) { return null // 过滤公开页面错误 } return event } })5. 企业级实践建议5.1 安全审计清单定期检查以下安全项检查项方法频率接口参数过滤手动测试特殊字符每周敏感信息泄露代码扫描工具每月暴力破解防护检查登录日志每日CSRF防护有效性自动化测试工具每次发布5.2 灰度发布方案通过nginx实现按比例放量split_clients ${remote_addr}AAA $variant { 50% production; 50% preview; } location /product { proxy_pass http://$variant; }5.3 灾备降级策略在网关层配置fallbackBean public RouteLocator customRouteLocator(RouteLocatorBuilder builder) { return builder.routes() .route(public_fallback, r - r.path(/api/public/**) .filters(f - f.circuitBreaker( c - c.setFallbackUri(forward:/fallback))) .uri(lb://jeecg-system)) .build(); }实际项目中我们发现将公开页面的路由配置与业务路由物理隔离能显著降低维护成本。比如单独创建public-routes.module.ts并在构建时通过环境变量控制打包策略这种架构设计在多个大型项目中验证了其稳定性。