除夕快乐啊，最近一直在开发前后端都没时间写博客了，正好把最近研究的拦截器拿出来卖弄一下～

什么是拦截器？

通俗点讲，就是在某一组条件条件未达到的情况下，禁止访问某一组页面；咱们举个栗子，我有一个页面，其路径为 dioxide-cn.ink/view/demo.html ，我只希望给我点过赞的读者能访问，那么没有点赞的读者就访问不了，这样我们就吧没有点赞的读者拦截在了页面外面；

我们在小学二年级的时候就已经学过了 Springboot 的拦截器和 Vue 的页面路由，我们顺着前人的智慧现在我们来通过原生 js 来实现一个拦截器的功能，并且让他看起来更容易配置和理解一些。为了提高学习的主动性，示例代码中使用一个了 “ 函数的链式调用 ” 、“ 类与对象的开发 ” 和 “ ajax在类方法中的同步调用 ”，可能不太适合刚入门 js 的读者～

思路与构造：

在上文中，我们提到了这样一段话 “ 在某一组条件条件未达到的情况下，禁止访问某一组页面 ” 从这句话中，我们可以直接剖析出对象的属性 —— 这个对象需要 “ 一组条件 ” “ 被拦截后重新定向到的页面 ” 和 “ 一组被拦截的目标页面 ” 那么我们先把这个对象实现出来：

group1: {desc: '需要token才能访问',redirect: '404',pages: ['/view/demo.html']
}

为了方便阅读我们添加了一个 desc 属性来注释该组是需要什么条件才能访问 pages 中的页面。这样，我们就得到了一组需求，但是我们似乎要配置很多组不同的加权配置，那么我们可以在外部再构造一个对象或一个对象数组来存放这些配置对象。为了方便叙述，这里我们将封装在 pages 对象中作为嵌套对象；

很明显，想要实现group1的拦截方法，我们需要从定义好的配置中我们能分析出我们需要的如下几个方法：

检测当前访问的页面是在 pages 数组中；
如果满足那么我们就需要判断 group1 是否满足我们所需要的权限；
如果权限也满足那么我们就允许访问者留在页面内，否则将被重定向至 404.html 页面；

理论存在，实践开始。为了提高阅读性和理解我们定义两个类（Util 工具类和 Condition 条件类），其中条件类我们用来定义一些条件判断方法，他们的返回值均为布尔类型；而工具类我们用来存放一些数据处理和条件组的综合判断（如：重定向页面、拦截器封装等）；

既然工具类需要调用条件类的方法，那么我们就需要让 Util 继承 Condition 的方法，现在我们来构造出这两个类：

class Condition {}
class Util extends Condition {}

我们类方法已经构思好了，现在我们用 token 来举例子（后端我已经用 springboot 写好了 token 的验证接口，前端 token 被存储在了 cookie 中）这样我们的条件就是拦截所有没有 token 或伪造token 的用户。这里我们使用链式函数首先对有无 token 进行判断，再执行 token 是否有效的判断；考虑到条件可能不止存在1个，我们需要定义一个条件组判断器，用来判断所有传入的条件的返回结果，即：一否全否，全真则真，现在我们来实现这些代码：

/*** condition 条件库* @author Dioxide.CN 2022/1/31*/
class Condition {/*** 检验token是否有效* @return {Boolean} true: 有效; false: 不存在或无效;*/trueToken() {if(this.tokenStatue){var    ret = true$.ajax({async: false, //同步执行url: 'http://localhost/verifyToken',type: 'post',data: {'token': $.cookie('token')},success: function(res) {ret = res}})return ret} else {return false}}/*** @java public boolean ifToken(){}* @retun {Boolean} true: 在页面内; false: 不在页面内;*/ifPage(pages) {var curr = window.location.pathnamefor(var key in pages) {if(curr.indexOf(pages[key])==0) {return true}}return false}}/*** util 工具库* @author Dioxide.CN 2022/1/31*/
class Util extends Condition {/*** 是否存在token* @return {Boolean} true: 存在; false: 不存在;*/ifToken() {if($.cookie('token') == undefined) {this.tokenStatue = false} else {this.tokenStatue = true}return this}/*** 重定向方法* @param {String} page 目标页面名*/redirectTo(page) {window.open('/' + page + '.html','_self');}/*** 条件集* @param {Array} 条件返回组; 布尔二维数组* @return {Boolean} true: 条件集为真; false: 条件集为假;*/getBoolean(...bool) {var last = truefor(var key of bool[0]) {last = last &amp;&amp; key}return last}/*** 在页面内且条件集为真时才能访问* @java public void intercept(){}* @param {Object} target 配置组* @param {Array} condition 条件集*/intercept(target, ...condition) {if(this.ifPage(target.pages)) {if(!this.getBoolean(condition)) {this.redirectTo(target.redirect)}}}}
}

这里的 <code>Util.intercept()</code> 就是我们所需要的拦截器驱动了，有了这些判断我们可以很容易的实现我们想要的各种拦截器功能：

const util = new Util() //实例化util/*** 拦截区* @example util.intercept(配置组, 条件集)* @example util.intercept(pages.group1,util.ifToken().trueToken())
*/
util.intercept(pages.group1,util.ifToken().trueToken())

这样我们就完成了原生 js 实现拦截器的功能～

附加链接：

Gitee：js组件库: 一些独立开发的js小功能组件https://gitee.com/dioxide-cn/js-component-library

原文：JS｜【原创】实现功能更强大的拦截器 - Dioxide.CN の时间轴除夕快乐啊，最近一直在开发前后端都没时间写博客了，正好把最近研究的拦截器拿出来卖弄一下～通俗点讲，就是在某一组条件条件未达到的情况下，禁止访问某一组页面；咱们举个栗子，我有一个页面，其路径为 dioxide-cn.ink/view/demo.html ，我只希望给我点过赞的读者能访问，那么没有点赞的读者就访问不了，这样我们就吧没有点赞的读者拦截在了页面外面；我们在小学二年级的时候就已经学过了 Springboot 的拦截器和 Vue 的页面路由，我们顺着前人的智慧现在我们来通过原生 js 来实现一个拦截器的功 […]https://dioxide-cn.ink/?p=87

JS｜使用原生js实现拦截器相关推荐

JS：原生JS实现message消息提示框
简介学习了一下如何使用原生JS(加上class类)实现message消息提示框的封装(繁琐版). 使用到的主要技术点:class类,JS. 功能点 1.四种提示状态(message success ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
mozilla js 引擎_Mozilla的内容拦截器，新JavaScript引擎以及更多开源新闻
mozilla js 引擎在本周的开放源代码新闻摘要中,Mozilla宣布了新的内容阻止程序并结束了Firefox OS,Edge浏览器JavaScript引擎源发布等. 开源新闻让您阅读愉快. 2 ...
js之原生js轮盘抽奖实例分析（幸运大转盘抽奖）
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...
[js进阶]原生js实现addClass,removeClass,hasClass方法
addClass function addClass(obj, cls){//获取 class 内容.var obj_class = obj.className,//判断获取到的 class 是否为空 ...
原生js快速查找指定元素
虽然已经很少有原生js写项目,不过有些组件任然使用js,原生js有一个非常麻烦的问题就是查找元素,写class怕准确度底,id总不不能写一大堆,又不想引用jquery className:id,cla ...
vue-resource 拦截器（interceptor）的使用
拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么 ...
javaweb添加拦截器
js请求后台代码添加拦截器: package com.ctzj.biz.isale.deploy.controller; import java.io.IOException; import java ...

JS｜使用原生js实现拦截器

什么是拦截器？

思路与构造：

附加链接：

JS｜使用原生js实现拦截器相关推荐

最新文章

热门文章