Nuxt.js实现校验访问浏览器类型的中间件


Posted in Javascript onAugust 24, 2018

前言

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。

这个需求非常常见,分享出去的页面的有时候在手机访问,有时候别人是PC打开的;

若是不是共享同一个页面的情况,就需要拦截跳转了;

当然你要共享同一个页面也可以(放大化到PC也需要添加某些CSS,也需判断设备)

思路

本质上还是校验 UA , 只是这次是从 req 拿到,而不是从客户端获取再做处理

客户端的处理的姿势

window.navigator.userAgent

服务端的处理姿势

其实基本和上面的思路一样的,只是我们能做处理的时间提前了

不用等到客户端页面渲染完毕后,再去判断,再做处理

用户的体验上会好很多

理清了逻辑我们就可以开始写了

谈谈Nuxt生命周期

Nuxt.js 就是一个Vue的服务端渲染框架,和React的服务端渲染框架 Next.js 类似,我们这里使用的版本是 v1.4.2 (默认初始化版本是基于 Express 的),让我们看官方给出的 Nuxt 执行生命周期流程

Nuxt.js实现校验访问浏览器类型的中间件 

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实现校验访问浏览器类型的中间件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue中使用gojs/jointjs的示例代码
Aug 24 #Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 #Javascript
浅谈Vue组件及组件的注册方法
Aug 24 #Javascript
JavaScript中this关键字用法实例分析
Aug 24 #Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 #Javascript
JavaScript原型链与继承操作实例总结
Aug 24 #Javascript
element-ui循环显示radio控件信息的方法
Aug 24 #Javascript
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
页面中js执行顺序
2009/11/09 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
微信小程序websocket实现聊天功能
2020/03/30 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python随机模块random使用方法详解
2020/02/14 Python
Python socket服务常用操作代码实例
2020/06/22 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
应急管理培训方案
2014/06/12 职场文书
国际会计专业求职信
2014/08/04 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
68句权威创业名言
2019/08/26 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android