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

核心点就是在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 中间件实现令牌的持久化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题

    如下所示: 解决办法: 删掉项目中node_modules文件夹 ; 然后再 重新下载一下 cnpm install 补充知识:vue在npm run dev时报错Error: Cannot find module 'xxx' 今天在做项目时出现了下面这个错误,找了很多博客,都说改一下代码写法就行了.不过视情况而定,有点时候有些代码改起来很麻烦,千丝万缕的关系,不是说改一下代码就行了的. 然后就试了很多方法,最后发现是node版本的原因,当时用的是node的最新版本@14.6.0,个人认为是新版

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • vue 全局封装loading加载教程(全局监听)

    前言: 为了页面美观,请求接口的时候延迟没有数据,页面感觉狠卡顿,封装loading,请求接口成功后隐藏掉(我这是用的vant 组件根据自己情况进行改变). 第一步: 建立loading.vue <template> <div class="loading"> <van-loading size="36px" vertical>加载中...</van-loading> </div> </templat

  • Vant 在vue-cli 4.x中按需加载操作

    在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** "plugins": [ ["import",{ "libraryName":"vant&q

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

    核心点就是在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 funct

  • 解决nuxt 自定义全局方法,全局属性,全局变量的问题

    注意 ,这个 在 asyncData 还是不能用的 ,在mounted等其他生命周期里面可以, asyncData 里因为获取不到this他在组件初始化前执行的,如果找到方法我会继续更新到下一篇博客 好现在说步骤,在plugins 文件夹里新增一个 commom.js名字你自己取 commom.js 测试代码 import Vue from 'vue' var comsys= { install(Vue){ Vue.prototype.comsys = { val:function(val){

  • ASP.NET Core使用自定义日志中间件

    这个日志框架使用的是ASP.NET Core的NLog,用来记录每次请求信息和返回信息. 1.首先创建一个Web应用项目,我选择的是MVC模板: 2.使用NuGet添加Microsoft.Extensions.Logging和NLog.Extensions.Logging 3.修改Configure方法: public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFac

  • Django框架静态文件处理、中间件、上传文件操作实例详解

    本文实例讲述了Django框架静态文件处理.中间件.上传文件操作.分享给大家供大家参考,具体如下: Django静态文件处理.中间件.上传文件 静态文件处理 在Django中,一般专门创建一个static目录来存放静态文件(css,js,image,video等文件). a. 在创建目录前,我们需要配置静态文件的路径.如: #在项目的settings.py文件中,配置STATIC_URL,一般默认是: STATIC_URL = '/static/' # '/static/'是指uri,映射下面的

  • Python Django中间件,中间件函数,全局异常处理操作示例

    本文实例讲述了Python Django中间件,中间件函数,全局异常处理操作.分享给大家供大家参考,具体如下: 应用名/middleware.py(定义中间件类,中间件函数.文件名可以任意): from django.http import HttpResponse # 定义中间件类. (类名可以任意,但类中的方法名是固定的) class TestMiddleware(object): '''中间件类''' def __init__(self): '''服务器重启之后,接收第一个请求时调用(只会

  • gearman + mysql方式实现持久化操作示例

    本文实例讲述了gearman+mysql方式实现持久化操作.分享给大家供大家参考,具体如下: 1.为什么要持久化? gearman的job server中的工作队列存储在内存中,一旦服务器有未处理的任务时重启或者宕机,那么这些任务就会丢失. 持久化存储队列可以允许添加后台任务,并将其存储在外部的持久型队列里(比如MySQL数据库). 2.关于gearman的持久化的文章,建议可以看官方文档 http://gearman.org/manual/job_server/#persistent_queu

  • java SpringBoot自定义注解,及自定义解析器实现对象自动注入操作

    # java-SpringBoot自定义参数解析器实现对象自动注入 解析器逻辑流程图表 后台解析注解的解析器 首先,我在java后台编写了一个解析器,代码如下 import com.ruoyi.framework.interceptor.annotation.LoginUser; import com.ruoyi.project.WebMoudle.WebUser.domain.WebUser; import com.ruoyi.project.WebMoudle.WebUser.service

  • springboot 自定义权限标签(tld),在freemarker引用操作

    第一步:引入jar包 <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.2.1-b03</version> </dependency> 第二步:自定义标签类 import java.util.Map; import java.util.Set; import javax.se

  • Spring-基于Spring使用自定义注解及Aspect实现数据库切换操作

    实现思路 重写Spring的AbstractRoutingDataSource抽象类的determineCurrentLookupKey方法. 我们来看下Spring-AbstractRoutingDataSource的源码 AbstractRoutingDataSource获取数据源之前会先调用determineCurrentLookupKey方法查找当前的lookupKey. Object lookupKey = determineCurrentLookupKey(); DataSource

  • Redis 彻底禁用RDB持久化操作

    Redis 禁用RDB持久化 Redis是默认开启RDB的,AOF则是默认关闭的.如果需要关闭RDB,将Redis完全作为一个缓存使用,需要修改配置项save. 开启save "", 将save 900 1.save 300 10.save 60 10000注释掉. 配置文件修改如下: save "" #save 900 1 #save 300 10 #save 60 10000 如果是中途关闭RDB持久化,还需要删除已经生成的文件dump.rdb.重启即可完全关闭

随机推荐