Nuxt.js实现了验证浏览器类型的中间件

前言

Nuxt.js非常容易使用。一个简单的项目只需要添加nuxt作为依赖组件。

这种需求非常普遍。有时共享页面在手机上访问，有时其他页面由电脑打开；

如果不是共享同一个页面的情况，需要截取跳转；

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

思路

本质上，它仍然是验证UA，但这一次它是从req获得的，而不是从客户端获得的，然后进行处理

客户端处理的手势

window.navigator.userAgent

服务器的处理姿态

其实和上面的想法基本一致，只是我们能做治疗的时间比较超前

您不必等到客户端页面被呈现，然后再对其进行判断和处理

用户体验会好很多

理清逻辑之后，我们就可以开始写作了

论Nuxt生命周期

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

渲染前有几个阶段，一般的全局配置在中间件阶段

那为什么不在nuxtServerInit中做一些处理呢，因为它只能触发store的动作

代码实现

这里假设你已经大体阅读了官方文件，对目录结构了如指掌为前提！

deviceType.js(utils目录)//这里的判断类型是自己整理的，覆盖面只涵盖我工作领域的//可以按需追加/** * * @param {*} UA，就是用户代理* @返回：型设备类型* env:访问环境（微信/微博/qq) * masklayer:就是给外部拿到判断是否显示遮罩层的，一些特殊环境要引导用户到外部去打开访问*/函数isw echat(UA){ return/micro messenger/I . test(UA)？真：假；}功能isWeibo(UA){ return/Weibo/I . test(UA)？真：假；}功能isQQ(UA) { return /QQ/i.test(UA)？真：假；}功能isMoible(UA){ return/(Android | WebOS | iPhone | IPoD |平板电脑|黑莓|Mobile)/i.test(UA)？真：假；}功能isIOS(UA){ return/iPhone | iPad | iPod/I . test(UA)？真：假；}功能isadroid(UA){ return/Android/I . test(UA)？真：假；}导出函数设备类型(UA){ if(isMoible(UA)){ if(isIOS(UA)){ if(isWechat(UA)){返回{ type : ' IOs '，env: '微信，masklayer: true，}；} if(isWeibo(UA)){ return { type : ' IOs '，env: 'weibo '，masklayer: true，}；} if(isQQ(UA)){ return { type : ' IOs '，env: 'qq '，masklayer: true，}；}返回{ type: 'ios '，}；} if(IsAnDroid(UA)){ if(IsWachat(UA)){ return { type : ' Android '，env: '微信，masklayer: true，}；} if(isWeibo(UA)){ return { type : ' Android '，env: 'weibo '，masklayer: true，}；} if(isQQ(UA)){ return { type : ' Android '，env: 'qq '，masklayer: true，}；}返回{ type: 'android '，}；}返回{ type: 'mobile '，}；} else { return { type: 'pc '，}；}}device.js(中间件目录)//@ ts-nocheckimport { device type }来自' ~/utils/device type '；导出默认函数（上下文){//@ ts-忽略上下文。用户代理=进程。服务器？语境。请求。标头['用户代理']:导航器。用户代理；//给全局上下文添加一个属性来保存我们返回的匹配信息语境。设备类型=设备类型(上下文。用户代理)；//这里注入到商店，是因为我部分页面需要判断机型请求不同的数据， //你们没有用到的话可以移除语境。商店。提交(' SetDeviceType '，上下文)。设备类型)；//若是判断美国联合航空公司(联合航空公司)非移动端的，就在这里做处理了.//context.redirect(状态，url)这个可以重定向到外部网站//若是内部访问可以直接用路由器对象推送if(上下文。设备类型。type==' PC '){//上下文。重定向(301，' https://wwwwww。百度。com ')} } nuxt。配置。射流研究…这种功能是面向全站的，所以要注入到全局，所以页面都默认执行

往路由器注入中间件即可全局生效

模块。exports={ router : {中间件：[' device ']，}，}；总结

以上所述是小编给大家介绍的Nuxt.js实现校验访问浏览器类型的中间件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！