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

2024-08-02 13:36:06

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

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

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

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

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

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

相关推荐

随机推荐