JeecgBoot Vue3实战：免登录页面配置全流程指南

在开发企业官网或产品展示页时，强制用户登录才能查看基础信息往往会造成体验断层。上周团队就遇到一个真实案例：某医疗机构的疫苗预约页面因登录拦截导致30%用户流失。本文将彻底解决这类问题，通过JeecgBoot Vue3项目的 五层访问控制体系 拆解，带你掌握从页面创建到接口放行的完整配置链。

1. 项目环境与基础准备

确保你的JeecgBoot Vue3项目基于以下环境运行：

# 推荐版本
node v16.14.2
vue-cli 4.5.15
jeecgboot-vue3 3.4.0+

常见版本冲突问题排查表：

问题现象	可能原因	解决方案
路由跳转404	vue-router版本不匹配	锁定版本为4.0.12
权限校验失效	ant-design-vue升级导致	回退到2.2.8版本
接口403	axios拦截器冲突	检查src/utils/request.js

提示：建议在开始前执行 git checkout -b feature/no-auth-page 创建独立分支

2. 前端免登录配置四步法

2.1 创建展示型页面组件

在 src/views/demo 目录新建 PublicPage.vue ：

<template>
  <div class="public-container">
    <h2>产品介绍</h2>
    <a-button @click="fetchData">加载数据</a-button>
  </div>
</template>

<script setup>
// 注意这里使用setup语法糖
const fetchData = async () => {
  try {
    const res = await getAction('/api/public/data')
    console.log(res)
  } catch (e) {
    console.error('接口异常:', e)
  }
}
</script>

2.2 特殊路由标记配置

修改 src/router/routes.ts ，添加meta标记：

{
  path: '/public',
  name: 'PublicPage',
  component: () => import('/@/views/demo/PublicPage.vue'),
  meta: {
    ignoreAuth: true,  // 核心配置
    title: '公开页面',
    hideTab: true
  }
}

常见配置错误 ：

• 误将path写成 /public/
• 忘记添加component的懒加载
• meta属性拼写错误（如错写成metal）

2.3 白名单拦截器改造

找到 src/store/permission.ts 中的 filterAsyncRoutes 方法，增加判断逻辑：

function filterAsyncRoutes(routes: AppRouteRecordRaw[]) {
  return routes.filter(route => {
    if (route.meta?.ignoreAuth) return true
    // ...原有权限判断逻辑
  })
}

2.4 前端权限校验绕过

修改 src/router/permission.ts 的导航守卫：

router.beforeEach(async (to) => {
  if (to.meta.ignoreAuth) return true  // 新增逻辑
  // ...原有鉴权流程
})

3. 后端接口放行三关键

3.1 拦截器白名单配置

在 src/main/java/org/jeecg/config/ShiroConfig.java 中添加：

filterChainDefinitionMap.put("/api/public/**", "anon");

路径匹配规则 ：

• /api/public/* 匹配单级路径
• /api/public/** 匹配多级路径
• /**/public/* 动态匹配中间路径

3.2 接口权限注解移除

检查Controller层方法，确保没有以下注解：

@RequiresRoles("admin")  // 需要删除
@RequiresPermissions("system:user:add")  // 需要删除

3.3 跨域配置检查

确认 src/main/java/org/jeecg/config/CorsConfig.java 包含：

registry.addMapping("/api/public/**")
    .allowedOrigins("*")
    .allowedMethods("GET","POST");

4. 联调排错实战手册

4.1 问题现象：页面可访问但接口401

排查步骤 ：

1. 打开浏览器开发者工具 → Network
2. 检查请求头是否携带Authorization
3. 确认请求URL是否匹配白名单路径
4. 查看后端日志是否有Shiro拦截记录

4.2 问题现象：页面无限重定向

解决方案 ：

1. 检查路由meta是否同时配置了：

   ignoreAuth: true,
   redirect: '/login'  // 需要删除
   

2. 清除浏览器缓存后测试

4.3 问题现象：生产环境配置失效

根本原因 ：

• 前端构建后路由信息被压缩
• 后端缓存未及时更新

处理方案 ：

# 前端
rm -rf dist && npm run build

# 后端
mvn clean package -DskipTests

5. 安全增强方案

虽然实现免登录访问，但需防范以下风险：

基础防护措施 ：

• 添加Google reCAPTCHA验证
• 关键接口实施限流（如Guava RateLimiter）
• 敏感数据脱敏处理

// 示例：简单接口限流
@RateLimiter(value = 10, key = "public:data")
@GetMapping("/api/public/data")
public Result<?> getPublicData() {
    //...
}

在最近为某电商平台实施这套方案时，我们发现通过Nginx层添加IP访问频率限制能有效预防爬虫攻击。具体做法是在 /etc/nginx/conf.d/security.conf 中添加：

location /api/public/ {
    limit_req zone=public burst=20 nodelay;
    proxy_pass http://backend;
}