Nuxt.js 는 브 라 우 저 형식 에 접근 하 는 미들웨어 를 검증 합 니 다.

머리말
Nuxt.js 는 매우 간단 하고 사용 하기 쉽다.간단 한 항목 은 nuxt 를 의존 구성 요소 로 추가 하면 됩 니 다.
이 수 요 는 매우 흔 하 다.공 유 된 페이지 는 가끔 핸드폰 으로 방문 하고 다른 사람 은 PC 로 열 린 다.
같은 페이지 를 공유 하 는 상황 이 아니라면 점프 를 차단 해 야 합 니 다.
물론 같은 페이지 를 공유 하 셔 도 됩 니 다.
사고의 방향
본질 적 으로 UA 를 검증 합 니 다.다만 이번 에는 클 라 이언 트 에서 가 져 온 것 이 아니 라 req 에서 가 져 온 것 입 니 다.
클 라 이언 트 의 처리 자세window.navigator.userAgent서버 의 처리 자세
사실 기본적으로 위의 사고 와 같은 것 은 우리 가 처리 할 수 있 는 시간 이 앞 당 겨 졌 을 뿐이다.
클 라 이언 트 페이지 렌 더 링 이 끝 난 후에 판단 하고 처리 할 필요 가 없습니다.
사용자 의 체험 이 많이 좋아 질 거 예요.
논 리 를 정리 하면 우 리 는 쓰기 시작 할 수 있다.
Nuxt 수명 주기 에 대해 이야기 합 니 다.
Nuxt.js 는 Vue 의 서버 렌 더 링 프레임 워 크 입 니 다.React 의 서버 렌 더 링 프레임 워 크 Next.js 와 유사 합 니 다.여기 서 사용 하 는 버 전 은 v 1.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"],
 },
};

총결산
위 에서 말 한 것 은 소 편 이 소개 한 Nuxt.js 가 브 라 우 저 유형 을 검사 하 는 미들웨어 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!