企业官网建设流程全解析

Vue3版JeecgBoot项目实战：5分钟实现官网免登录访问全流程指南

在开发企业官网、产品展示页等公开项目时，强制用户登录才能访问往往会造成用户体验断层。作为基于Vue3的JeecgBoot开发者，你可能遇到过这样的困扰：官网文档对免登录配置的说明较为分散，而业务又急需快速上线公开页面。本文将带你用最短时间打通前后端配置链路，实现真正的"开箱即用"级免登录访问。

1. 前端工程配置实战

1.1 创建公开页面模板

首先在/src/views/public目录下新建展示页面（以产品首页为例）：

<template> <div class="public-container"> <header class="product-banner"> <h1>{{ productName }}</h1> </header> <main> <ProductFeature /> <ClientCases /> </main> </div> </template> <script setup lang="ts"> 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中，需要处理两种场景：

1. 路径白名单（/src/router/guard/paramMenuGuard.ts）:

const whitePathList = [ PageEnum.BASE_LOGIN, '/product', '/solution', '/contact' ]

2. 路由元信息校验（推荐方案）：

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 Result<List<ProductVO>> 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: trace

3.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> </template>

4.2 静态资源CDN优化

在vite.config.ts中配置生产环境CDN：

build: { 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 安全审计清单

定期检查以下安全项：

5.2 灰度发布方案

通过nginx实现按比例放量：

split_clients "${remote_addr}AAA" $variant { 50% "production"; 50% "preview"; } location /product { proxy_pass http://$variant; }

5.3 灾备降级策略

在网关层配置fallback：

@Bean 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，并在构建时通过环境变量控制打包策略，这种架构设计在多个大型项目中验证了其稳定性。