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

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

一般我是通过判断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,达成链表的原理.

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

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

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

同理,n个一样的设置

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

2.如何触发

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

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

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

3.如何触发到最开始

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

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

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

这样他返回到了第一次.

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

他开始调用

调用完成后返回到return

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

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(中间件)中实现路由鉴权操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • nuxt 页面路由配置,主页轮播组件开发操作

    在上一个章节内容中,我们开发了AppHeader公共顶部菜单导航栏组件,本章节呢,我们根据菜单导航的路由导航,来配置我们的 page页面, 去到pages目录,我们需要创建3个[nuxt_link_name].vue页面文件,用来匹配路由导航需要加载的页面: 好,我们进入命令行,来创建页面文件, 1.windows 系统下可以使用如下命令: for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v 2.linux/ma

  • nuxt 服务器渲染动态设置 title和seo关键字的操作

    使用如下钩子即可,但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = 'new title' callback(null, {}) }, 补充知识:vue 每个页面动态切换title keywords description (seo的设置) 最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description !!!在这里先添加一步: html文件添加 <meta

  • nuxt.js添加环境变量,区分项目打包环境操作

    最近由于业务需求,开发了一个nuxt.js项目. 配置打包环境变量时,发现nuxt.js的文档过于简单,无法做参照. 经查证了一些资料后,解决了该问题.遂整理成文档,发布于此,给同行一些参照. 一.添加cross-env插件 npm npm i cross-env yarn yarn add cross-env 二.添加环境变量文件 根目录添加env.production NODE_ENV = 'production' VUE_APP_TITLE = 'production' 根目录添加env.

  • Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

    Nuxt嵌套路由官网上的API详解:点击链接 看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容,要想默认的在<nuxt-child>区域显示一个页面内容怎么办? 自己案例代码: pages/parent.vue <template> <div> <h2>父组件的页面的内容</h2> <ul> <!-- 进行切换子页面,写法同vue.js --> <li><nuxt-link t

  • nuxt 每个页面head标签内容设置方式

    导读 在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签 内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致: 所以我们需要对这三个页面单独做一个head,更加方便于SEO优化,搜索引擎的爬取: 好,我们打开index.vue,编辑如下: head(){ return { title: 'jokes home page', meta: [{ hid: "description

  • Nuxt.js 静态资源和打包的操作

    直接引入图片 我们在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用. <div <img src="~static/logo.png"></div> 这时候在npm run dev 下是完全正常的,那我们看一下打包. 打包静态HTML并运行 用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,进行运行. 在终端中输入: npm run generate 然后在dist文件夹下输入live-serve

  • 解决nuxt页面中mounted、created、watch执行两遍的问题

    前言: 在开发中偶然检查Network请求的时候发现,在页面中created钩子函数中请求了一个接口,但是页面这个页面加载的时候,接口会连续请求两边,然后我就排查是否有其他地方调用了同样的接口,检查了好几遍后发现并没有,WTF,然后我在created中打印了一下,惊奇的发现...created会执行两次打印... WTF.WTF.WTF,小朋友你是否有很多问号???,然后试了下,不光created会执行两遍,mounted也行,就连watch里面监听的也会,握草(草是一种植物),此处省略我咔咔排

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

    路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问. 一般我是通过判断cookie中存储的token来判断的. 在middleware文件夹下新建"auth.js"的文件 在当前auth.js文件内判断cookie中是否包含token字段 import getCookie from '~/utils/getCookie' export default function ({route, req, res, redirect}) { let isClient = process.cl

  • nuxt框架中路由鉴权之Koa和Session的用法

    引子 博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了. 路由拦截 前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex 状态树来做. middleware middleware/auth.js export default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') }

  • nuxt.js服务端渲染中axios和proxy代理的配置操作

    需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊 第

  • Laravel框架中的路由和控制器操作实例分析

    本文实例讲述了Laravel框架中的路由和控制器操作.分享给大家供大家参考,具体如下: 路由 简介: 将用户的请求转发给相应的程序进行处理 作用:建立url和程序之间的映射 请求类型:get.post.put.patch.delete 目录:app/http/routes.php 基本路由:接收单种请求类型 //get请求 Route::get('hello1',function(){ return 'hello world'; }) //post请求 Route::post('hello2',

  • React路由鉴权的实现方法

    前言 上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对 vue 和 react 做专门说明,希望同学看了以后能够受益匪浅,对你的项目能够有所帮助,本文借鉴了很多大佬的文章篇幅也是比较长的. 背景 单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面.虽然服务端做了进行接口的权限,但是每一个路由加载的时候都要去请求这个接口太浪费了.有时候是通过SESSIONID来校验登陆权限的. 在正式开始 react 路由鉴权之前我们先看一下vue的路由鉴权是如何工作的: 一.

  • 使用React-Router实现前端路由鉴权的示例代码

    React-Router 是React生态里面很重要的一环,现在React的单页应用的路由基本都是前端自己管理的,而不像以前是后端路由,React管理路由的库常用的就是就是 React-Router .本文想写一下 React-Router 的使用,但是光介绍API又太平淡了, 而且官方文档已经写得很好了 ,我这里就用一个常见的开发场景来看看 React-Router 是怎么用的吧.而我们一般的系统都会有用户访问权限的限制,某些页面可能需要用户具有一定的权限才能访问.本文就是用 React-Ro

  • SpringCloud中Gateway实现鉴权的方法

    目录 一.JWT 实现微服务鉴权 1 什么是微服务鉴权 2.代码实现 一.JWT 实现微服务鉴权 JWT一般用于实现单点登录.单点登录:如腾讯下的游戏有很多,包括lol,飞车等,在qq游戏对战平台上登录一次,然后这些不同的平台都可以直接登陆进去了,这就是单点登录的使用场景.JWT就是实现单点登录的一种技术,其他的还有oath2等. 1 什么是微服务鉴权 我们之前已经搭建过了网关,使用网关在网关系统中比较适合进行权限校验. 那么我们可以采用JWT的方式来实现鉴权校验. 2.代码实现 思路分析 1.

  • 详解如何使用Vuex实现Vue后台管理中的角色鉴权

    目录 前言 功能分析 实现思路 代码实现 vuex中定义user模块,存储用户信息以及用户侧边导航数据 router中路由meta中新增roles 定义当前路由可以访问的所有的角色 router新增路由前置首位 做权限拦截 侧边导航页面 使用 getters中的 authMenus 循环侧边导航 最后一步 登录页登录时调用 请求登录的action即可大功告成 总结 前言 一直以来,我们使用vue做后台管理时,不同角色的权限功能,都是我们老大难的问题,本篇文章我将手把你带你实现vue后台管理中的用

  • 详解nuxt路由鉴权(express模板)

    这里我们以用户登录鉴权为例 express依赖express-session中间件实现session功能 若我们不加载express-session组件 router.get('/user/login', function (req, res) { console.log(req,req.session) }) 会发现不存在session对象 引入express-session组件 // server/index.js文件 ... import session from 'express-ses

  • 在nuxt中使用路由重定向的实例

    我们都知道,在写SPA的时候,我们可以通过配置vue-router来实现路由的重定向. 官方文档(以及ts类型)的定义中给出了这一选项: interface RouteConfig = { path: string, redirect?: string | Location | Function, } 也就是说,我们可以定义这样一个路由: { path: "/foo", redirect: "/foo/bar", } 这样,我们在访问/foo的时候,就会被重定向到/

随机推荐