获取客户端(前端)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));
    }
相关推荐
不爱学习的YY酱1 小时前
【计网不挂科】计算机网络期末考试——【选择题&填空题&判断题&简述题】试卷(4)
网络·计算机网络
装睡的小5郎1 小时前
家庭宽带如何开启公网ipv4和ipv6
网络
yfs10241 小时前
压缩Minio桶中的文件为ZIP,并通过 HTTP 响应输出
网络·网络协议·http
有谁看见我的剑了?1 小时前
Ubuntu 22.04.5 配置vlan子接口和网桥
服务器·网络·ubuntu
hgdlip1 小时前
有什么办法换网络ip动态
网络·tcp/ip·智能路由器
超栈1 小时前
HCIP(11)-期中综合实验(BGP、Peer、OSPF、VLAN、IP、Route-Policy)
运维·网络·网络协议·计算机网络·web安全·网络安全·信息与通信
დ旧言~1 小时前
【网络】应用层——HTTP协议
开发语言·网络·网络协议·http·php
不爱学习的YY酱1 小时前
【计网不挂科】计算机网络期末考试——【选择题&填空题&判断题&简述题】试卷(1)
网络·计算机网络
汪小敏同学1 小时前
【Django进阶】django-rest-framework中文文档——快速入门
网络·windows·oracle
徐浪老师2 小时前
OSPF动态路由配置实验:实现高效网络自动化
网络·自动化·智能路由器