Vue 2.x折騰記 - (12) Nuxt.js寫一個校驗訪問瀏覽器設備類型及環境的中間件

前言

這個需求很是常見,分享出去的頁面的有時候在手機訪問,有時候別人是PC打開的;

如果不是共享同一個頁面的狀況,就須要攔截跳轉了;

固然你要共享同一個頁面也能夠(放大化到PC也須要添加某些CSS,也需判斷設備)

思路

本質上仍是校驗UA, 只是此次是從req拿到,而不是從客戶端獲取再作處理

客戶端的處理的姿式

• 拿到window.navigator.userAgent
• 寫一個判斷的JS,匹配,返回對應的類型
• 拿到類型以後咱們再考慮是否去跳轉,或者作一些行爲處理

服務端的處理姿式

其實基本和上面的思路同樣的,只是咱們能作處理的時間提早了

不用等到客戶端頁面渲染完畢後,再去判斷,再作處理

用戶的體驗上會好不少

理清了邏輯咱們就能夠開始寫了

談談Nuxt生命週期

Nuxt.js就是一個Vue的服務端渲染框架,和React的服務端渲染框架Next.js相似,

咱們這裏使用的版本是v1.4.2(默認初始化版本是基於Express的),

讓咱們看官方給出的Nuxt執行生命週期流程

render(渲染)以前有幾個階段,通用全局配置均在middleware(中間件)階段

那爲何不在nuxtServerInit去作一些處理,由於這裏只能觸發store的action

代碼實現

這裏已經假設你已經大致看完官方文檔,對於目錄結構什麼都瞭解爲前提!

deviceType.js(utils目錄)

// 這裏的判斷類型是本身整理的,覆蓋面只涵蓋我工做領域的
// 能夠按需追加

/** * * @param {*} UA ,就是userAgent * @returns type: 設備類型 * env: 訪問環境(微信/微博/qq) * masklayer: 就是給外部拿到判斷是否顯示遮罩層的,一些特殊環境要引導用戶到外部去打開訪問 */

function isWechat(UA) {
  return /MicroMessenger/i.test(UA) ? true : false;
}

function isWeibo(UA) {
  return /Weibo/i.test(UA) ? true : false;
}

function isQQ(UA) {
  return /QQ/i.test(UA) ? true : false;
}

function isMoible(UA) {
  return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA)
    ? true
    : false;
}

function isIOS(UA) {
  return /iPhone|iPad|iPod/i.test(UA) ? true : false;
}

function isAndroid(UA) {
  return /Android/i.test(UA) ? true : false;
}

export function deviceType(UA) {
  if (isMoible(UA)) {
    if (isIOS(UA)) {
      if (isWechat(UA)) {
        return {
          type: "ios",
          env: "wechat",
          masklayer: true,
        };
      }
      if (isWeibo(UA)) {
        return {
          type: "ios",
          env: "weibo",
          masklayer: true,
        };
      }
      if (isQQ(UA)) {
        return {
          type: "ios",
          env: "qq",
          masklayer: true,
        };
      }
      return {
        type: "ios",
      };
    }
    if (isAndroid(UA)) {
      if (isWechat(UA)) {
        return {
          type: "android",
          env: "wechat",
          masklayer: true,
        };
      }
      if (isWeibo(UA)) {
        return {
          type: "android",
          env: "weibo",
          masklayer: true,
        };
      }
      if (isQQ(UA)) {
        return {
          type: "android",
          env: "qq",
          masklayer: true,
        };
      }
      return {
        type: "android",
      };
    }

    return {
      type: "mobile",
    };
  } else {
    return {
      type: "pc",
    };
  }
}




複製代碼

device.js(middleware目錄)

// @ts-nocheck
import { deviceType } from "~/utils/deviceType";
export default function(context) {
  // @ts-ignore
  context.userAgent = process.server
    ? context.req.headers["user-agent"]
    : navigator.userAgent;
  // 給全局上下文添加一個屬性來保存咱們返回的匹配信息
  context.deviceType = deviceType(context.userAgent);
  // 這裏注入到store,是由於我部分頁面須要判斷機型請求不一樣的數據,
  // 大家沒有用到的話能夠移除
  context.store.commit("SetDeviceType", context.deviceType);

  // 如果判斷UA非移動端的,就在這裏作處理了..
  // context.redirect(status,url) 這個能夠重定向到外部網站
  // 如果內部訪問能夠直接用router對象push
  if (context.deviceType.type === "pc") {
    // context.redirect(301,'https://wwww.baidu.com')
  }
}

複製代碼

nuxt.config.js

這種功能是面向全站的,因此要注入到全局,因此頁面都默認執行

往router注入中間件便可全局生效

module.exports = {
  router: {
    middleware: ["device"],
  },
};

複製代碼

總結

至此,常規的開發已經基本知足

有不對之處亦或者更好的實現請留言,會及時修正,謝謝閱讀。