登录失败!

[AndyFree96]

已⭐，感谢作者的开源贡献👏👏👏

环境

• 操作系统: Windows 11 专业版本 22621.3007
• Nodejs版本: 16.16.0
• Yarn: 1.22.21
• npm: 8.11.0

情况复现

将项目clone到本地后，分别按照Xmw_server和Xmw_web项目的README文件安装相关的包。新建vue2_baiwumm_com数据库(Xmw_server项目中的config.default.js可见)，并将作者博客提供的SQL文件将数据库数据导入。之后执行yarn run debug命令启动后端项目，修改前端项目的API请求地址为本地刚启动的后端地址，再执行yarn serve启动前端项目。

如下图所示，可以正常地从本地获取验证码：

输入用户名admin和 密码123456后，前端页面显示如下:

终端显示如下:

尝试方案

通过调试发现Xmw_server项目的home.js文件定义的generateVerifCode方法:

  async generateVerifCode() {
      ......
      ctx.session.verifCode = captcha.text.toLowerCase(); // 存session用于验证接口获取文字码
      ......
}

将验证码保存到ctx.session.verifCode中，然后在同文件的login方法中，获取ctx.session.verifCode时的值为undefined。

 async login() {
  ......
  if (ctx.session.verifCode.toLowerCase() !== verifyCode.toLowerCase()) {
          return (ctx.body = { state: 0, msg: "验证码错误!" });
        }
 ......
}

导致出现login方法报错：TypeError: Cannot read properties of undefined (reading 'toLowerCase')错误。

我的解决方案是，在home.js顶部增加了一个全局的let globalScopeVerifCode = ""变量，然后在generateVerifCode方法中增加一条赋值语句globalScopeVerifCode = captcha.text.toLowerCase();，最后将login方法的中的代码段:

 if (ctx.session.verifCode.toLowerCase() !== verifyCode.toLowerCase()) {
          return (ctx.body = { state: 0, msg: "验证码错误!" });
        }

改为:

 if (globalScopeVerifCode .toLowerCase() !== verifyCode.toLowerCase()) {
          return (ctx.body = { state: 0, msg: "验证码错误!" });
        }

可正常登录并进入系统中。

问题

请问作者有遇到这个问题吗？如何解决的呢？

期待回复😊😊😊

[baiwumm]

这好像是 egg.js 早期版本的问题，不知道现在解决了没有，你可以百度查一下，好像改这两个配置就可以，你试试

[AndyFree96]

这好像是 egg.js 早期版本的问题，不知道现在解决了没有，你可以百度查一下，好像改这两个配置就可以，你试试

感谢回复，已尝试你提供的思路，修改dominWhiteList和origin之后，Chrome浏览器的Network选项卡内容如下：

补充

在macOS 14.1.1操作系统上用Node.js 16.16.0运行项目表现正常。

问题复现

参考 https://github.com/eggjs/egg)](https://github.com/eggjs/egg 新建项目，将home.js、router.js和config.default.js分别修改为如下内容：

home.js

const { Controller } = require("egg");

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.session.index = "index";
    ctx.body = "hi, egg";
  }

  async pointA() {
    const { ctx } = this;
    ctx.body = ctx.session.index;
    console.log("pointA Session", ctx.session.index);
  }

  async pointB() {
    const { ctx } = this;
    ctx.session.pointB = "pointB";
    ctx.body = ctx.session.index;
    console.log("pointB Session", ctx.session.index);
  }

  async pointC() {
    const { ctx } = this;
    ctx.body = `${ctx.session.index} ${ctx.session.pointB}`;
    console.log("pointC Session", ctx.session.index, ctx.session.pointB);
  }
}

module.exports = HomeController;

router.js

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = (app) => {
  const { router, controller } = app;
  router.get("/", controller.home.index);
  router.get("/pointA", controller.home.pointA);
  router.post("/pointB", controller.home.pointB);
  router.post("/pointC", controller.home.pointC);
};

config.default.js

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = (app) => {
  const { router, controller } = app;
  router.get("/", controller.home.index);
  router.get("/pointA", controller.home.pointA);
  router.post("/pointB", controller.home.pointB);
  router.post("/pointC", controller.home.pointC);
};

访问主页

浏览器访问http://127.0.0.1:7001可看到：

访问pointA

访问http://127.0.0.1:7001/pointA可看到：

终端显示如下：

访问pointB

访问http://127.0.0.1:7001/pointB可看到：

终端显示如下：

访问pointC

访问http://127.0.0.1:7001/pointC可看到：

终端显示如下：

结论

说明在get请求对应的路由函数index()使用ctx.session.index = "index"形式设置值，在post请求对应的路由函数pointB()不能正常获取到值（ctx.session.index为undefined）。同时也说明在post请求对应的路由函数pointB()使用ctx.session.pointB = "pointB"形式设置值，在另一个post请求对应的路由函数pointC()也不能获取到值。

这是在 #3 (comment) 环境中测试的结果，由于对egg这个框架不是很了解，最终还是用了 #3 (comment) 提到的思路解决目前的问题，希望作者或者其他有缘人能提供更好的思路😊👏。