nuxt 自定义 auth 中间件实现令牌的持久化操作


Posted in Javascript onNovember 05, 2020

核心点就是在process.server下,把之前存在 cookie 中的数据再用store.commit一下

auth.js

/* eslint-disable no-unused-vars */
/* eslint-disable no-useless-return */

export const TokenKey = 'Admin-token'

/**
 * 解析服务端拿到的cookie
 * @param {*} cookie
 * @param {*} key
 */
export function getCookie(cookie, key) {
 if (!cookie) return
 const arrstr = cookie.split('; ')
 for (let i = 0; i < arrstr.length; i++) {
 const temp = arrstr[i].split('=')

 if (temp[0] === key) return unescape(temp[1])
 }
}

// 登录页
const loginPath = '/login'
// 首页
const indexPath = '/home'
// 路由白名单,直接绕过路由守卫
const whiteList = [loginPath]

/**
 * @description 鉴权中间件,用于校验登陆
 *
 */
export default async ({ store, redirect, env, route, req }) => {
 const { path, fullPath, query } = route
 const { redirect: redirectPath } = query

 // 应对刷新 vuex状态丢失的解决方案
 if (process.server) {
 const cookie = req.headers.cookie
 const token = getCookie(cookie, TokenKey)

 // 设置登录状态
 if (token) {
  store.commit('LOGIN', token) //'LOGIN' 和store中的mutations对应起来就可以了
 }

 if (token) {
  // 已经登录,进来的是登录页,且有重定向的路径,直接调跳到重定向的路径
  if (path === loginPath && path !== redirectPath) {
  redirect(redirectPath)
  } else if (path === '/') {
  redirect(indexPath)
  } else {
  // 其他的已经登录过得直接跳过
  return
  }
 } else {
  // 鉴权白名单
  if (whiteList.includes(path)) return

  // 未登录,进来的不是是登录页,全部重定向到登录页
  if (!path.includes(loginPath)) {
  redirect(`${loginPath}?redirect=${encodeURIComponent(fullPath)}`)
  }
 }
 }
}

补充知识:NUXT 中间件 Middleware

中间件可以使您的自定义的函数在渲染页面之前运行

所有的中间件都必须放置在middleware/目录下。文件名将作为中间件的名称(如:middleware/auth将成为中间件auth)。

中间件收到上下文作为第一个参数:

export default function (context) {
 context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
}

中间件将按照此顺序在序列中执行:

1、nuxt.config.js

2、匹配的布局

3、匹配的页面

中间件可以是异步的,仅返回一个Promise或者使用第二个callback返回值:

middleware/stats.js

import axios from 'axios' 
export default function ({ route }) {
 return axios.post('http://my-stats-api.com', {
 url: route.fullPath
 })
}

然后,在nuxt.config.js,布局或者页面中,配置middleware参数

nuxt.config.js

module.exports = {
 router: {
 middleware: 'stats'
 } 
}

中间件stats将在每次路由改变时被调用。

想了解中间件的例子,请移步example-auth0

以上这篇nuxt 自定义 auth 中间件实现令牌的持久化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue.js中的组件系统
May 30 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 #Javascript
前端vue如何使用高德地图
Nov 05 #Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 #Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 #Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 #Javascript
Array.filter中如何正确使用Async
Nov 04 #Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
深入了解js原型模式
2019/05/30 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
10款最好的Python开发编辑器
2019/07/03 Python
python树的同构学习笔记
2019/09/14 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
事业单位辞职信范文
2014/01/19 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
名人传读书笔记
2015/06/26 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python