获取客户端（前端）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.loginNameconsole.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));}