vue 前端获取用户登录地址 ip 设备型号

在做一个获取用户登录ip时遇到了点问题，在后台获取时出现了获取到的ip地址是我服务器的地址（原因未知，没找到），，就想着在前端直接获取到然后发送给后端，这样就不会出现ip地址是服务器地址的尴尬了但是在查询资料时，发现好多是用js获取，但是vue引用外部js特别麻烦，甚至没找到解决的方法。查找好久资料后，才发现有对应的vue解决方案，也就是使用搜狐的api，具体使用如下在vue.config.js

十月微涼

13894人浏览 · 2020-05-18 16:42:13

十月微涼 · 2020-05-18 16:42:13 发布

在做一个获取用户登录ip时遇到了点问题，在后台获取时出现了获取到的ip地址是我服务器的地址（原因未知，没找到），，就想着在前端直接获取到然后发送给后端，这样就不会出现ip地址是服务器地址的尴尬了

但是在查询资料时，发现好多是用js获取，但是vue引用外部js特别麻烦，甚至没找到解决的方法。

查找好久资料后，才发现有对应的vue解决方案，也就是使用搜狐的api，具体使用如下

搜狐那个接口关闭了，可以使用：http://myip.ipip.net/

在vue.config.js配置文件中配置跨域
注意： 每次更新配置文件都需要重启项目，否则无效

 devServer: {
      proxy: {//配置跨域
          '/apis': {
              target: 'http://pv.sohu.com',//搜狐的域名
              ws: true,
              changOrigin: true,//允许跨域
              pathRewrite: {
                  '^/apis': ''//请求的时候使用这个api就可以
              }
          }
          
      }

使用：
发送网络请求

this.$http.post('/apis/cityjson?ie=utf-8',{}).then(res => {
    console.log(res.data);
    //解析格式即可
 })

返回数据：
在这里插入图片描述

另附获取设备型号的方法

在这里插入图片描述

// get brower
export function GetCurrentBrowser () {
  let ua = navigator.userAgent.toLocaleLowerCase()
  let browserType = null
  if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
    browserType = 'IE'
  } else if (ua.match(/firefox/) != null) {
    browserType = 'firefox'
  } else if (ua.match(/ucbrowser/) != null) {
    browserType = 'UC'
  } else if (ua.match(/opera/) != null || ua.match(/opr/) != null) {
    browserType = 'opera'
  } else if (ua.match(/bidubrowser/) != null) {
    browserType = 'baidu'
  } else if (ua.match(/metasr/) != null) {
    browserType = 'sougou'
  } else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
    browserType = 'QQ'
  } else if (ua.match(/maxthon/) != null) {
    browserType = 'maxthon'
  } else if (ua.match(/chrome/) != null) {
    var is360 = _mime('type', 'application/vnd.chromium.remoting-viewer')
    if (is360) {
      browserType = '360'
    } else {
      browserType = 'chrome'
    }
  } else if (ua.match(/safari/) != null) {
    browserType = 'Safari'
  } else {
    browserType = 'others'
  }
  return browserType
}
 
function _mime (option, value) {
  var mimeTypes = navigator.mimeTypes
  for (var mt in mimeTypes) {
    if (mimeTypes[mt][option] === value) {
      return true
    }
  }
  return false
}
 
// get os
export function GetOs () {
  let sUserAgent = navigator.userAgent.toLocaleLowerCase()
  let isWin = (navigator.platform === 'win32') || (navigator.platform === 'windows')
  let isMac = (navigator.platform === 'mac68k') || (navigator.platform === 'macppc') || (navigator.platform === 'macintosh') || (navigator.platform === 'macintel')
  if (isMac) return 'Mac'
  var isUnix = (navigator.platform === 'x11') && !isWin && !isMac
  if (isUnix) return 'Unix'
  var isLinux = (String(navigator.platform).indexOf('linux') > -1)
  if (isLinux) return 'Linux'
  if (isWin) {
    var isWin2K = sUserAgent.indexOf('windows nt 5.0') > -1 || sUserAgent.indexOf('windows 2000') > -1
    if (isWin2K) return 'Win2000'
    var isWinXP = sUserAgent.indexOf('windows nt 5.1') > -1 || sUserAgent.indexOf('windows xp') > -1
    if (isWinXP) return 'WinXP'
    var isWin2003 = sUserAgent.indexOf('windows nt 5.2') > -1 || sUserAgent.indexOf('windows 2003') > -1
    if (isWin2003) return 'Win2003'
    var isWinVista = sUserAgent.indexOf('windows nt 6.0') > -1 || sUserAgent.indexOf('windows vista') > -1
    if (isWinVista) return 'WinVista'
    var isWin7 = sUserAgent.indexOf('windows nt 6.1') > -1 || sUserAgent.indexOf('windows 7') > -1
    if (isWin7) return 'Win7'
  }
  if (sUserAgent.indexOf('android') > -1) return 'Android'
  if (sUserAgent.indexOf('iphone') > -1) return 'iPhone'
  if (sUserAgent.indexOf('symbianos') > -1) return 'SymbianOS'
  if (sUserAgent.indexOf('windows phone') > -1) return 'Windows Phone'
  if (sUserAgent.indexOf('ipad') > -1) return 'iPad'
  if (sUserAgent.indexOf('ipod') > -1) return 'iPod'
  return 'others'
}
 
// getAddress
// {/*<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>*/}
// {/*export function GetAddress () {*/}
//   {/*return returnCitySN*/}
// {/*}*/}

使用：

//获取用户登录设备
import * as sysTool from "assets/js/systemTool";

//方法中使用
      this.brower = sysTool.GetCurrentBrowser();
      this.os = sysTool.GetOs();
      console.log(
        "浏览器，操作系统，：",
        this.brower,
        this.os
      );

参考文章：
https://blog.csdn.net/Lycoriy/article/details/103596419?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E8%8E%B7%E5%8F%96IP&utm_medium=distribute.pc_search_result.none-task-blog-2_blogsobaiduweb~default-0-103596419

https://blog.csdn.net/xuebimi/article/details/96840965?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E8%8E%B7%E5%8F%96IP&utm_medium=distribute.pc_search_result.none-task-blog-2_blogsobaiduweb~default-5-96840965