nuxt.js 在middleware(中间件)中实现路由鉴权操作


Posted in Javascript onNovember 06, 2020

路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问。

一般我是通过判断cookie中存储的token来判断的。

在middleware文件夹下新建“auth.js”的文件

在当前auth.js文件内判断cookie中是否包含token字段

import getCookie from '~/utils/getCookie'

export default function ({route, req, res, redirect}) {
 let isClient = process.client;
 let isServer = process.server;
 let redirectURL = '/sign';
 var token, path;

 // 在服务端
 if (isServer) {
  // 获取服务端cookie
  let cookies = getCookie.getcookiesInServer(req)
  // 获取当前服务端cookie中是否含有token字段
  token = cookies.token ? cookies.token : ''
 }
 // 在客户端
 if (isClient) {
  // 获取客户端(本地)cookie中的token字段
  token = getCookie.getcookiesInClient('token')
 }

 // 判断是否获取到token
 // 未获取到,重定向到登陆页面
 if (!token) {
  redirect(redirectURL)
 }
}

新建获取cookie的文件

~/uitls/getCookie.js

首先:下载js-cookie

npm i js-cookie -s

import Cookie from 'js-cookie'

export default {
 //获取服务端cookie
 getcookiesInServer:function (req) {
  let service_cookie = {};
  req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (val) {
   let parts = val.split('=');
   service_cookie[parts[0].trim()] = (parts[1] || '').trim();
  });
  return service_cookie;
 },
 //获取客户端cookie
 getcookiesInClient:function (key) {
  return Cookie.get(key) ? Cookie.get(key) : ''
 }
}

在需要路由鉴权的page页面中使用

比如在 ~/page/index.vue中使用

<script>
  export default {
   name: 'index',
    // auth 为刚才在在middleware文件夹下新建的auth.js文件
    middleware: 'auth',
  }
</script>

js-cookie 扩展

1.安装js-cookie

npm install js-cookie --save

2.使用

1 引用

import Cookie from 'js-cookie'

2 客户端使用

// 1.获取
Cookie.get(key)
// 2.设置
Cookie.set('name', value, {expires: 过期时间})
// 3.删除
Cookie.remove("name")
// 过期时间设置:
let seconds = 3600;   // 过期时间 /秒
let expires = new Date(new Date() * 1 + seconds * 1000);

补充知识:js 中间件的简单实现原理

1.基础版

我将复杂版的改变了下,该变成不同的方法名,不同的调用方法,但是只要next设置好,比较适合新手查看

class Middleware {
  constructor () {
    this.middleware = (next)=>{//console.log("this.middleware: "+next)
      /*this.middleware: () =>{
        console.log("use: "+fn.call(this, next));
        return fn.call(this, next)*/
      return next();
    }
  }
 
  run (fn) {
    // console.log(this)
    this.middleware(
      () => fn.call(this,"nihaoafddsf")
    )
  }
 
  use (fn) {
    const previousFn = this.middleware
    this.middleware=(next)=>{
      // console.log(next)
      /*() =>{
        console.log("fetch: "+fn.call(this, next));
        return fn.call(this, next)
      }*/
      previousFn.call(this, () =>{
        // console.log("use: "+fn.call(this, next));
        return fn.call(this, next)
      })
    }
  }
  fetch(fn){
    const previousFn = this.middleware
    this.middleware=(next)=>{
      // console.log(next)//() => fn.call(this,"nihaoafddsf")
      previousFn.call(this, () =>{
        console.log("fetch: "+fn)
        return fn.call(this, next)
      })
    }
  }
}
 
let bnm = new Middleware;
bnm.use(
  (next)=>{
    console.log(3)
    console.log(next)
    next()
  }
)
bnm.fetch((next)=>{
  console.log("nihaoa")
  next()
})
 
bnm.run(function (canshu) {
console.log(1)
  console.log(canshu)
})

工具

1.首先,在这里是使用了函数式编程,让函数赋值给变量.

2.巧妙利用了js class 和原型的this原理(当继承的函数被调用时,this 指向的是当前继承的对象,而不是继承的函数所在的原型对象。)

原理剖析

1.为什么可以形成链接

1.利用了工具2,原型的this,达成链表的原理.

nuxt.js 在middleware(中间件)中实现路由鉴权操作

当第一个use 调用的时候,他的previous 就是最原始的this.middleware

同时,将class 的this.middleware 改成自己的.

当第二个调用的时候,他的preious 就是第一个的this.middleware

同理,n个一样的设置

当最后一个调用完毕,此时的this.middleware指向的是最后一个设置的.

2.如何触发

它使用了run的方法,看起来真的像java的线程模块

nuxt.js 在middleware(中间件)中实现路由鉴权操作

启动的是最后一个绑定的this.middleware,如我前面所讲.

所以你会看到,当你点击的时候,它立刻出发到了fetch()方法,

3.如何触发到最开始

按我前面的讲法,应该是先触发最后一个,为什么他会触发第一个,是的,当我使用复杂版的时候,我也是很懵逼,搞不懂.然后就有了一开始,我将她变成多个不同的方法,对这些方法依次调用.这样总算扒开了它的三次链调,

更应该称之为递归,如果你在next() 方法之后,相应的填写一些的方法,它一样会执行.就像递归一样.但他又有链表的特性.真的神奇.

nuxt.js 在middleware(中间件)中实现路由鉴权操作

这就是他的链式调用利用,我前面讲的两点.

这样他返回到了第一次.

4.开始依次触发相应的,达成中间件的一次调用

nuxt.js 在middleware(中间件)中实现路由鉴权操作

他开始调用

调用完成后返回到return

nuxt.js 在middleware(中间件)中实现路由鉴权操作

然后按照一开始来的路程原路返回.

2.进阶版,如何节省代码,才是我们的中级目标

js一些黑魔法,才是真正有意思的,

尤其在调试的时候,如果不熟悉,你就会以为他只运转了以次,其实,他已经运转了很多次了.

class Middleware {
 constructor () {
  this.i = 0;
  this.middleware = (next) => { console.log(next);return next()}
 }
 
 run (fn) {
  console.log(this)
  this.middleware(
   () => fn.call(this)
  )
 }
 
 use (fn) {
  const previousFn = this.middleware
  this.middleware = (next) =>
   previousFn.call(this, () =>{
      console.log(fn);
    return fn.call(this, next)
   })
 }
}
 
const instance = new Middleware()
 
instance.use(function (next) {
 setTimeout(() => {
  console.log('first')
  this.firstMiddlewareLoaded = true
  next()
 }, 500)
})
 
instance.use(function (next) {
 setTimeout(() => {
  console.log('second')
  this.secondMiddlewareLoaded = true
  next()
 }, 250)
})
 
instance.use(function (next) {
  console.log('third')
  this.ThirdMiddlewareLoaded = true
  next()
})
const start = new Date()
instance.run(function () {
 console.log('first middleware loaded:', this.firstMiddlewareLoaded)
 console.log('second middleware loaded:', this.secondMiddlewareLoaded)
 console.log('Third middleware loaded:', this.ThirdMiddlewareLoaded)
 console.log('time passed:', new Date() - start)
})

写法还是一样,就是它这里有些很多疑惑的问题.主要就是调用函数套两层的问题

外面套了两层,当使用call的时候,使用函数式编程,他就无法读取的到最内层所带的next()方法,

他这里使用了setimeout ,因为程序立刻执行完毕,它没有next(),或者next没有执行到,他就是会立刻返回了.

但是计时器一到就立刻调用了.这就是原因.也是一些疑惑的问题

以上这篇nuxt.js 在middleware(中间件)中实现路由鉴权操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
基于复选框demo(分享)
Sep 27 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue中的计算属性和侦听属性
Nov 06 #Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 #Javascript
使用Vue实现一个树组件的示例
Nov 06 #Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 #Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 #Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 #Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 #Javascript
You might like
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
基于php实现的验证码小程序
2016/12/13 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
javascript中创建对象的几种方法总结
2013/11/01 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python使用tensorflow深度学习识别验证码
2018/04/03 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
基于树莓派的语音对话机器人
2019/06/17 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
如何在Python对Excel进行读取
2020/06/04 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python 实现汉诺塔游戏
2020/11/28 Python
python 模拟登录B站的示例代码
2020/12/15 Python
电子商务专业实习生自我鉴定
2013/09/24 职场文书
党校培训思想汇报
2014/01/03 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
珠宝店促销方案
2014/03/21 职场文书
教师教学评估方案
2014/05/09 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
小学优秀教师材料
2014/12/15 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
python实现简单的聊天小程序
2021/07/07 Python