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 相关文章推荐
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 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
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
google广告之另类js调用实现代码
2020/08/22 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python import 上级目录的导入
2020/11/03 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
优秀通讯员事迹材料
2014/01/28 职场文书
《影子》教学反思
2014/02/21 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
现金出纳岗位职责
2014/03/15 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
教师年度考核个人总结
2015/02/12 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript