登录卡住的核心问题是前端加载第三方资源卡住了怎么解决?

老师好 从控制台的报错信息来看,登录卡住的核心问题是前端加载第三方资源(高德地图、ECharts 词云)失败,导致页面初始化未完成,从而阻塞了登录流程。这个怎么解决???



评论区

鲍军峰 2026-03-02 16:01

一、问题根源


  1. 高德地图 API Key 无效:控制台明确报错 <AMapJSAPI> Error key!,网络请求中加载地图的 URL 为:plaintexthttps://webapi.amap.com/maps?v=2.0&key=高德地图key&plugin=AMap.PlaceSearch 这里的 key=高德地图key 是一个占位符,并非有效的 API Key,导致地图组件加载失败,阻塞了后续的登录流程。
  2. 其他警告: ECharts 词云源映射错误:属于次要问题,不影响核心登录功能。 Cookie SameSite 属性警告:属于浏览器安全策略提示,不影响登录。

鲍军峰 2026-03-02 16:05

老师:我禁用可不可以,这个地图主要是用来做什么的呢???

超级管理员 2026-03-02 16:29

@鲍军峰

跟这个无关

鲍军峰 2026-03-02 17:11

那是什么原因呢???

鲍军峰 2026-03-02 17:13

我修改前端主页可以解决不???


<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 新增:全局屏蔽高德地图核心代码(页面加载第一时间生效) --> <script> // 1. 提前定义空的AMap对象,避免代码报错 window.AMap = window.AMap || { Map: function() { return { init: () => {}, on: () => {}, off: () => {} }; }, PlaceSearch: function() { return { search: () => {}, setCity: () => {} }; }, plugin: (arr, cb) => cb && cb(), Loader: { load: () => Promise.resolve(window.AMap) }, version: '2.0' }; // 2. 拦截所有加载amap.com的脚本标签 const originalCreateElement = document.createElement; document.createElement = function(tagName) { if (tagName.toLowerCase() === 'script') { const script = originalCreateElement.call(this, tagName); // 重写src属性,过滤所有amap.com相关请求 Object.defineProperty(script, 'src', { set: function(value) { if (value && !value.includes('amap.com') && !value.includes('高德地图key')) { this.setAttribute('src', value); } }, get: function() { return this.getAttribute('src'); } }); return script; } return originalCreateElement.call(this, tagName); }; console.log("✅ 高德地图全局屏蔽已生效"); </script> <meta charset="UTF-8"> <link rel="icon" type="image/svg+xml" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="JeeLowCode,低代码,vue3,element plus,avue,typescript,vite"> <meta name="description" content="JeeLowCode 基于 vue3 + CompositionAPI + typescript + vite3 + element plus + avue 的低代码平台,免费开源!"> <title>JeeLowCode 低代码平台</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; background-color: #f5f5f5; } .app-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #ffffff; z-index: 9999; } .app-loading-wrap { text-align: center; } .app-loading-logo { width: 80px; height: 80px; margin-bottom: 20px; } .app-loading-title { margin-bottom: 30px; } .app-loading-item { position: relative; width: 60px; height: 60px; margin: 0 auto; } .app-loading-outter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #f3f3f3; border-top: 4px solid #409eff; border-radius: 50%; -webkit-animation: loader-outter 1s linear infinite; animation: loader-outter 1s linear infinite; } .app-loading-inner { position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 4px solid #f3f3f3; border-top: 4px solid #67c23a; border-radius: 50%; -webkit-animation: loader-inner 0.8s linear infinite; animation: loader-inner 0.8s linear infinite; } @-webkit-keyframes loader-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes loader-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } </style> </head> <body> <div id="app"> <div class="app-loading"> <div class="app-loading-wrap"> <div class="app-loading-title"> <img src="./src/assets/imgs/logo.png" class="app-loading-logo" alt="Logo" /> </div> <div class="app-loading-item"> <div class="app-loading-outter"></div> <div class="app-loading-inner"></div> </div> </div> </div> </div> <script type="module" src="/src/main.ts"></script> </body> </html>


超级管理员 2026-03-02 17:15

@鲍军峰

登录逻辑在这里src\views\Login\components\LoginForm.vue,自己看一下卡在哪一步

鲍军峰 2026-03-02 17:23

核心结论:登录失败的根本原因找到了! 脚本排查结果明确显示: 1. ❌ MySQL 的 jeelowcode_master 库中没有 admin 用户(这是登录失败的核心); 2. ❌ 登录接口返回{"code":401,"msg":"账号未登录"},因为数据库中无用户,认证逻辑直接失败; 3. ✅ 后端服务、Redis、前端打包、Nginx 均正常,和高德地图无关!



这个怎么解决???》》



[root@localhost vue_new]# #!/bin/bash

[root@localhost vue_new]# echo "====================================="

=====================================

[root@localhost vue_new]# echo "JeeLowCode 登录问题一键排查工具"

JeeLowCode 登录问题一键排查工具

[root@localhost vue_new]# echo "====================================="

=====================================

[root@localhost vue_new]#

[root@localhost vue_new]# # 1. 检查后端服务是否运行

[root@localhost vue_new]# echo -e "\n【1/6】检查后端服务状态(48080端口)..."


【1/6】检查后端服务状态(48080端口)...

[root@localhost vue_new]# PORT_STATUS=$(netstat -tulpn | grep 48080 | wc -l)

 -H "Content-Type: application/json" \

 -d '{"username":"admin","password":"123456"}' | grep -o "\"code\":200")

if [ -n "$LOGIN_RESP" ]; then

 echo -e "✅ 登录接口正常,返回code:200"

else

 echo -e "❌ 登录接口异常!响应内容:"

 curl -s -X POST http://127.0.0.1:48080/login \

   -H "Content-Type: application/json" \

   -d '{"username":"admin","password":"123456"}'

fi


# 5. 检查前端打包文件是否正常

echo -e "\n【5/6】检查前端dist目录是否存在..."

if [ -d "/home/administrator/Jeelowcode/vue_new/dist" ]; then

 echo -e "✅ 前端打包目录存在"

else

 echo -e "❌ 前端未打包!请执行:cd /home/administrator/Jeelowcode/vue_new && npm run build"

fi


# 6. 检查Nginx配置是否生效

echo -e "\n【6/6】检查Nginx配置和状态..."

NGINX_STATUS=$(systemctl is-active nginx 2>/dev/null)

if [ "$NGINX_STATUS" = "active" ]; then

 echo -e "✅ Nginx服务正常运行"

else

 echo -e "❌ Nginx未启动!请执行:systemctl start nginx"

fi


echo -e "\n====================================="

echo "排查完成!核心结论:"

echo "1. 若接口返回code:200 → 问题在前端路由/缓存"

echo "2. 若接口返回其他code → 问题在后端认证逻辑"

echo "3. 若MySQL无admin用户 → 需初始化数据库"

echo "====================================="[root@localhost vue_new]# if [ $PORT_STATUS -gt 0 ]; then

>   echo -e "✅ 后端服务正常运行(48080端口已占用)"

> else

>   echo -e "❌ 后端服务未启动!请先启动:java -jar jeelowcode-admin.jar --server.port=48080"

>   exit 1

> fi

✅ 后端服务正常运行(48080端口已占用)

[root@localhost vue_new]#

[root@localhost vue_new]# # 2. 检查Redis是否运行

[root@localhost vue_new]# echo -e "\n【2/6】检查Redis服务状态..."


【2/6】检查Redis服务状态...

[root@localhost vue_new]# REDIS_STATUS=$(systemctl is-active redis 2>/dev/null)

[root@localhost vue_new]# if [ "$REDIS_STATUS" = "active" ]; then

>   echo -e "✅ Redis服务正常运行"

> else

>   echo -e "⚠️ Redis未启动/未安装,尝试启动:systemctl start redis"

> fi

✅ Redis服务正常运行

[root@localhost vue_new]#

[root@localhost vue_new]# # 3. 检查MySQL连接和admin用户

[root@localhost vue_new]# echo -e "\n【3/6】检查MySQL中admin用户是否存在..."


【3/6】检查MySQL中admin用户是否存在...

[root@localhost vue_new]# MYSQL_CMD="mysql -uroot -p123456 -e \"USE jeelowcode_master; SELECT username FROM sys_user WHERE username='admin';\""

[root@localhost vue_new]# USER_EXIST=$(eval $MYSQL_CMD 2>/dev/null | grep admin | wc -l)

[root@localhost vue_new]# if [ $USER_EXIST -gt 0 ]; then

>   echo -e "✅ MySQL中admin用户存在"

> else

>   echo -e "❌ MySQL中无admin用户!请检查jeelowcode_master库的sys_user表"

> fi

❌ MySQL中无admin用户!请检查jeelowcode_master库的sys_user表

[root@localhost vue_new]#

[root@localhost vue_new]# # 4. 测试登录接口是否可用

[root@localhost vue_new]# echo -e "\n【4/6】测试登录接口响应..."


【4/6】测试登录接口响应...

[root@localhost vue_new]# LOGIN_RESP=$(curl -s -X POST http://127.0.0.1:48080/login \

>   -H "Content-Type: application/json" \

>   -d '{"username":"admin","password":"123456"}' | grep -o "\"code\":200")

[root@localhost vue_new]# if [ -n "$LOGIN_RESP" ]; then

>   echo -e "✅ 登录接口正常,返回code:200"

> else

>   echo -e "❌ 登录接口异常!响应内容:"

>   curl -s -X POST http://127.0.0.1:48080/login \

>     -H "Content-Type: application/json" \

>     -d '{"username":"admin","password":"123456"}'

> fi

❌ 登录接口异常!响应内容:

{"code":401,"data":null,"msg":"账号未登录"}[root@localhost vue_new]#

[root@localhost vue_new]# # 5. 检查前端打包文件是否正常

[root@localhost vue_new]# echo -e "\n【5/6】检查前端dist目录是否存在..."


【5/6】检查前端dist目录是否存在...

[root@localhost vue_new]# if [ -d "/home/administrator/Jeelowcode/vue_new/dist" ]; then

>   echo -e "✅ 前端打包目录存在"

> else

>   echo -e "❌ 前端未打包!请执行:cd /home/administrator/Jeelowcode/vue_new && npm run build"

> fi

✅ 前端打包目录存在

[root@localhost vue_new]#

[root@localhost vue_new]# # 6. 检查Nginx配置是否生效

[root@localhost vue_new]# echo -e "\n【6/6】检查Nginx配置和状态..."


【6/6】检查Nginx配置和状态...

[root@localhost vue_new]# NGINX_STATUS=$(systemctl is-active nginx 2>/dev/null)

[root@localhost vue_new]# if [ "$NGINX_STATUS" = "active" ]; then

>   echo -e "✅ Nginx服务正常运行"

> else

>   echo -e "❌ Nginx未启动!请执行:systemctl start nginx"

> fi

✅ Nginx服务正常运行

[root@localhost vue_new]#

[root@localhost vue_new]# echo -e "\n====================================="


=====================================

[root@localhost vue_new]# echo "排查完成!核心结论:"

排查完成!核心结论:

[root@localhost vue_new]# echo "1. 若接口返回code:200 → 问题在前端路由/缓存"

1. 若接口返回code:200 → 问题在前端路由/缓存

[root@localhost vue_new]# echo "2. 若接口返回其他code → 问题在后端认证逻辑"

2. 若接口返回其他code → 问题在后端认证逻辑

[root@localhost vue_new]# echo "3. 若MySQL无admin用户 → 需初始化数据库"

3. 若MySQL无admin用户 → 需初始化数据库

[root@localhost vue_new]# echo "====================================="

=====================================

[root@localhost vue_new]#


鲍军峰 2026-03-02 17:27

问题不知道出在那里了?????始终登录不了,又不错。



vue


<template>  <el-form @submit="handleLogin">    <el-form-item prop="username">      <el-input v-model="form.username" placeholder="用户名" />    </el-form-item>    <el-form-item prop="password">      <el-input v-model="form.password" type="password" placeholder="密码" />    </el-form-item>    <el-button type="primary" @click="handleLogin">登录</el-button>  </el-form></template><script setup>import { ref } from 'vue'import { ElMessage } from 'element-plus'import { useRouter } from 'vue-router'import { login } from '@/api/login' // 登录接口封装const router = useRouter()const form = ref({  username: '',  password: ''})// 核心登录方法(卡壳大概率在这里)const handleLogin = async () => {  try {    // 步骤1:表单校验(卡壳1)    if (!form.value.username || !form.value.password) {      ElMessage.error('请输入账号密码')      return    }        // 步骤2:调用登录接口(卡壳2,最常见)    const res = await login(form.value)        // 步骤3:接口返回成功,存储token(卡壳3)    if (res.code === 200) {      localStorage.setItem('token', res.data.token)      // 步骤4:跳转到主页(卡壳4)      router.push('/index')    } else {      ElMessage.error(res.msg || '登录失败')    }  } catch (error) {    // 步骤5:异常捕获(卡壳5,高德地图报错可能触发这里)    console.error('登录异常:', error)    ElMessage.error('登录请求失败,请重试')  }}</script>

第二步:逐步骤排查 “卡壳点”(按优先级排序)


1. 最常见:点击登录按钮后,handleLogin 方法根本没执行


  • 排查方法:在 handleLogin 第一行加 console.log('开始登录'),点击登录看控制台是否输出;
  • 原因:高德地图报错导致 window.AMap 未定义,前端代码执行报错,阻塞了按钮点击事件;
  • 验证:在浏览器控制台执行 window.AMap = { Map: () => ({ init: () => {} }) } 后,再点击登录,看是否输出日志。

2. 次常见:login 接口调用失败(返回 401/500)


  • 排查方法:找到 @/api/login 文件,查看接口请求地址是否正确:
  • 原因:接口地址写错,导致请求 404,触发 catch 异常。

3. 少见:接口返回成功,但路由跳转失败


  • 排查方法:在 router.push('/index') 前加 console.log('准备跳转', res.data.token)
  • 原因:路由守卫(src/permission.ts)拦截,或 /index 路由不存在。

4. 极少见:表单校验阻塞


  • 排查方法:看是否有自定义校验规则,比如验证码、图形验证未通过。

第三步:针对你的场景的快速定位命令

在前端项目目录执行,直接搜索关键代码:

bash

运行


# 1. 查找登录接口的请求地址grep -r "url.*login" --include="*.js" --include="*.ts" src/api/# 2. 查找handleLogin方法中的异常捕获g


鲍军峰 2026-03-02 17:34


是不是数据库中没有这张表???我修改密码时,提示没有表???


鲍军峰 2026-03-02 17:50

好像库里没sys_user这张表,是你的数据库脚本文件有问题还是????我可以重建不??????



mysql -uroot -p123456 << 'EOF' USE jeelowcode_master; -- 如果表存在则删除,避免冲突 DROP TABLE IF EXISTS sys_user; -- 创建核心的用户表 CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '用户ID', username VARCHAR(50) NOT NULL UNIQUE COMMENT '用户名', password VARCHAR(255) NOT NULL COMMENT '密码(BCrypt加密)', nickname VARCHAR(50) DEFAULT '' COMMENT '昵称', status TINYINT DEFAULT 0 COMMENT '状态:0-正常,1-禁用', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统用户表'; -- 插入admin用户,密码为admin123的BCrypt加密值 INSERT INTO sys_user (username, password, nickname, status) VALUES ( 'admin', '$2a$10$5Yf8G8k8bF7d6S5a4A3s2D1f0G9h8J7k6L5j4H3g2F1', '系统管理员', 0 ); -- 验证数据是否插入成功 SELECT id, username, status FROM sys_user WHERE username = 'admin'; EOF

超级管理员 2026-03-02 17:58

不要乱跟着ai弄,AI很多时候都是乱编一堆有的没有的返回,好好看一下我们的文档在本地开发环境跑起来,再考虑部署的事,因为我们是低代码框架,不是0代码框架,肯定需要改动到代码的,如果为了单单看效果的话,可以到我们演示环境看都可以。建议看一下我们的文档在本地跑起来再考虑其他的事

https://doc.jeelowcode.com/doc/500-1-0

JeeLowCode技术支持-小海 2026-03-02 17:59

我们对应的系统用户表是

system_users

试一下重建一下数据库

鲍军峰 2026-03-02 19:08

但你们数库存脚本里面确实没有那一个脚本呀


鲍军峰 2026-03-02 19:23

你那文档乱的很,每一个文档都没说清楚


鲍军峰 2026-03-02 19:25

一下扯win环境,下又扯linux环境,没说清楚一下文档

回复

扫码关注

添加客服
图片未加载,请刷新后再试
联系我们