开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

在开发项目中需求需要规定项目系统的最低兼容版本，对用户打开系统所使用的浏览器进行自动检测，检测当前用户使用的浏览器是否可以兼容项目系统的最低版本。所以就上网了解了一下来记录分享

1、在早期，浏览器之间相互抄袭伪装，导致其UA可能包含其他浏览器的信息，例如：chrome的UA可能为：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.65 Safari/534.24

所以chrome和safari的版本号要依据情况单独处理，下面的函数返回包含浏览器名称和版本号的数组，对chrome和safari进行了处理

  getBrowserInfo(){
    let agent = navigator.userAgent.toLowerCase() ; // 获取浏览器信息
    let regStr_ie = /msie [\d.]+;/gi ;  // 处理IE浏览器   msie IE浏览器简称MSIE
    let regStr_ff = /firefox\/[\d.]+/gi // 处理火狐浏览器
    let regStr_chrome = /chrome\/[\d.]+/gi ; // 处理谷歌浏览器
    let regStr_saf = /safari\/[\d.]+/gi ; // 处理safari浏览器
    let regStr_safVersion = /version\/[\d.]+/gi ; // 处理safari浏览器
    //IE浏览器
    if(agent.indexOf("msie")>0){return agent.match(regStr_ie) ;}
   //firefox浏览器
   if(agent.indexOf("firefox")>0){return agent.match(regStr_ff) ;}
   //Chrome浏览器
   if(agent.indexOf("chrome")>0){return agent.match(regStr_chrome) ;}
   //Safari浏览器
   if(agent.indexOf("safari")>0 && agent.indexOf("chrome")<0){
     let bro= agent.match(regStr_saf)[0].split('/')[0];
     let ver = agent.match(regStr_safVersion)[0].split('/')[1];
     let user = bro+'/'+ver;
     return [user];
   }
 },
 
 最后返回的格式为一个数组    ：  ['chrome/108.0.0']

2、获取到版本号后，可用下面的方法进行版本大小判断，版本号可能包含两个小数点，因此分别比较：

  compareBrowser(ver1,ver2) {
    let version1pre = parseFloat(ver1); // 获取到的当前浏览器版本
    let version2pre = parseFloat(ver2); // 设置的李彤最低兼容版本
    let version1next =  ver1.replace(version1pre + ".","");
    let version2next =  ver2.replace(version2pre + ".","");
      if(version1pre > version2pre){
        return true;
      }else if(version1pre < version2pre){
        return false;
      }else{
        if(version1next >= version2next){
          return true;
        }else{
          return false;
        }
      }
  },

3、基于上方的两个方法 就可以实现判断代码如下：

import { getBrowserInfo, compareBrowser } from '@/assets/utils/utils.js'

router.beforeEach(async (to, from, next) => {
  let info = getBrowserInfo()[0].split('/')
  let browser = info[0]
  let version = info[1]
  console.log(info)
  if (browser === 'chrome') {
    let flag = compareBrowser(version, '69.0')
    if (!flag && !to.fullPath.startsWith('/error')) {
      next('/error')
      return
    }
  } else if (browser === 'firefox') {
    let flag = compareBrowser(version, '68.0')
    if (!flag && !to.fullPath.startsWith('/error')) {
      next('/error')
      return
    }
  }
  next()
})

总结

使用navigator.userAgent.toLowerCase()
在封装函数进行数据处理，拿到浏览器数据进行对比
之后再根据返回的数据进行路由放行拦截的操作

js获取、浏览器名称及版本号并对比

总结