获取客户端（前端）IP地址

1.主要使用场景

        查看操作记录等

2.实现原理

        在前端的 Vue.js 应用中，通常是无法直接获取到当前电脑的局域网 IP 地址的，因为浏览器限制了这类敏感信息的访问。局域网 IP 地址是客户端（浏览器）到服务器端（通常是后端）的连接信息，而不是直接从浏览器获取的。

        一般情况下，你可能需要通过后端接口来获取客户端的 IP 地址。在 Vue.js 中，可以通过向后端发送请求来获取客户端的 IP 地址。后端可以通过读取请求的 IP 地址头部来获取客户端的真实 IP。

3.代码

        3.1前端增加登录记录代码示例

        向后端发送除IP外的其他需要记录的数据

    //添加登陆记录    insertLoginLog() {      this.logForm.loginTime=this.getCurrentTime();      this.logForm.empcode=this.loginForm.loginName      console.log(this.logForm)      insertLoginLog(this.logForm)        .then((res) => {          if (res.data.code === 200) {            this.$message({              message: "登录成功",              type: "success",            });          } else {            this.$message.error(res.data.message);          }        })        .catch((err) => {          this.$message.error("添加登录记录异常");          console.log(err);        });    },

               3.2后端增加登录记录示例

                后端接收请求并获取请求发送的IP地址

    /**     * 新增登陆记录     * @param     * @return     */    @PostMapping("/api/user/insertLoginLog")    public Result insertLoginLog(@RequestBody LoginNumber loginNumber,                                 HttpServletRequest request,                                 @RequestHeader(value = "X-Forwarded-For", required = false) String clientIp){        if (clientIp == null) {            clientIp = request.getRemoteAddr(); // 获取默认的客户端 IP 地址        }        loginNumber.setLoginIP(clientIp);        return new Result(200,"",userService.insertLoginLog(loginNumber));    }