vue实战——登录过期【详解】

登录过期逻辑

现在普遍的登录权限校验方式是JWT (json web token),当登录成功时,前端页面会获得一个 token ,每个 token 都设置了过期时间,通过解析 token 即可判断出 token 是否过期。

token 过期,即登录过期。

核心技术

前端项目安装依赖 jsonwebtokendayjs

cnpm i -S jsonwebtoken
cnpm i -S dayjs

src\router\index.js 中使用它们

import jwt from "jsonwebtoken";
import moment from "dayjs";

解析token

const payload = jwt.decode(token);

判断token是否过期

moment().isAfter(moment(payload.exp * 1000))
  • moment() 即当前时间
  • moment(payload.exp * 1000) 是token的过期时间
  • isAfter() 用于判断当前时间是否晚于token的过期时间

完整代码范例

src\router\index.js

import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";
import { store_State_init } from "@/store";
import jwt from "jsonwebtoken";
import moment from "dayjs";
import { Message } from "element-ui";Vue.use(VueRouter);const routes = [{ path: "/", redirect: "/index/content" },{path: "/index",component: (resolve) => require(["@/views/index/index.vue"], resolve),children: [{path: "content",name: "首页的内容(首页中的首页)",component: (resolve) => require(["@/views/index/content.vue"], resolve),},{path: "members",name: "成员",component: (resolve) => require(["@/views/members/index.vue"], resolve),},// 博客{path: "blog",meta: { requiresAuth: true },component: (resolve) => require(["@/views/blog/index.vue"], resolve),},{path: "*",component: (resolve) =>require(["@/views/otherPages/404.vue"], resolve),},],},// 注册{path: "/register",component: (resolve) => require(["@/views/register/index.vue"], resolve),},// 登录{path: "/login",component: (resolve) => require(["@/views/login/index.vue"], resolve),},// 作品{path: "/index/works",component: (resolve) => require(["@/views/works/index.vue"], resolve),},// 重置密码{path: "/resetPassword",component: (resolve) =>require(["@/views/resetPassword/index.vue"], resolve),},// 用户中心{path: "/userCenter",meta: { requiresAuth: true },component: (resolve) => require(["@/views/userCenter/index.vue"], resolve),},// 404 表示请求的页面不存在、已被删除或无法访问{path: "/404",component: (resolve) => require(["@/views/otherPages/404.vue"], resolve),},// 未匹配到的路由,重定向到 /404{ path: "*", redirect: "/404" },
];const router = new VueRouter({routes,
});// 全局路由守卫
router.beforeEach((to, from, next) => {const token = store.state.token;if (token) {const payload = jwt.decode(token);// token过期 —— 当前时间超过token的过期时间if (moment().isAfter(moment(payload.exp * 1000))) {sessionStorage.clear();// 重置 vuexstore.replaceState(store_State_init);Message({offset: 150,message: "登录已过期!",type: "warning",});}}// 需鉴权的路由—— 判断路由的meta元数据中,是否requiresAuth为trueif (to.matched.some((record) => record.meta.requiresAuth)) {// 判断用户是否已登录if (store.state.isLogin) {// 已登录,则跳转到目标路由(需要用户登录的页面)next();} else {// 未登录,跳转到登录页next("/login");}} else {// 公共页面,直接跳转到目标路由next();}
});export default router;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137183.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现智慧工地的高效建筑管理,数据分析起着关键作用!

智慧工地是利用物联网、云计算、大数据等技术,实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式。 智慧工地架构: 1、终端层:充分利用物联网技术、移动应用、智能硬件设备提高现场管控能力。通过RFID、传感器、摄像头、手机等终端…

很多个pdf怎么合并在一起?

很多个pdf怎么合并在一起?作为一个办公室的伙伴,对于PDF格式肯定不会陌生。它强大的功能为我们的工作提供了许多便利。由于PDF文件格式的稳定性和安全性较高,我们通常在工作或学习中使用它来传输文件,很多人都喜欢将办公文件都做成…

NVM安装node后提示没有对应npm包(即:无法将“npm”项识别为 cmdlet、函数、脚本文件)

背景 windows11 node版本降低到v12.22.12后,执行:nvm -v npm -v npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果 包括路径,请确保路径正确,然后再试一次。 所在位置 …

java项目调用python进程

问题描述 某一功能是通过python项目实现的,但是主项目是java项目,此时希望在java项目中调用python进程。 方法 import lombok.extern.slf4j.Slf4j;import java.io.BufferedReader; import java.io.File; import java.io.IOException; import java.io.…

数据结构(C语言) 实验-栈与字符串

删除子串 字符串采用带头结点的链表存储,设计算法函数void delstring(linkstring s, int i,int len) 在字符串s中删除从第i个位置开始,长度为len的子串。 void delstring(linkstring s, int i, int len) {linkstring p,q,r;int cnt 1;p s->next;wh…

Python 解决tkinter的Menu菜单command参数与bind方法共用触发事件

用普通函数作为媒介,使用event_generate()方法模拟触发bind()事件来创建一个模拟的event对象,并将其传递给绑定的事件处理函数。 运行结果 示例代码 import tkinter as tk# 菜单事件 def menuEvent(event):print(event.x, event.y)label.config(textf鼠…

OC-编译错误

明明包含了头文件,但是还是显示未知的类型 可能这个头文件被某个宏包住了 #if defined(__cplusplus) 在 C 代码中包含了一个 C 的头文件会显示这个错误“the util lib only be used in c”,此时用 #if defined(__cplusplus) #endif 包一下就行了&…

IntelliJ IDEA 2023.2.1 (Ultimate Edition) 版本 Git 如何合并多次的本地提交进行 Push

本心、输入输出、结果 文章目录 IntelliJ IDEA 2023.2.1 (Ultimate Edition) 版本 Git 如何合并多次的本地提交进行 Push前言为什么需要把多次本地提交合并合并提交的 2 种形式:事中合并、事后合并事中合并事后合并:支持拆分为多组提交弘扬爱国精神IntelliJ IDEA 2023.2.1 (U…

在uniapp和微信小程序中onshow和onload的区别

在uni-app框架中,是两个页面级别的生命周期函数 onLoad:页面加载时调用,可以获取参数,通过options,但是只调用一次,onLoad"适合进行页面初始化操作” onshow: "onShow"生命周期…

Android Mvp案例解析

目录 后端数据接口数据格式 App客户端布局逻辑主界面布局 M(Model)V(View)P(Presenter)OkhttpRetrofitRxJava网络http请求 Mvp架构-初学者MVP架构的契约者 后端数据接口 接口地址:https://apis.…

flink1.18.0 自适应调度器 资源弹性缩放 flink帮你决定并行度

jobmanager.scheduler Elastic Scaling | Apache Flink 配置文件修改并重启flink后,webui上会显示调整并行度的按钮,他可以自己调整,你也可以通过webUI手动调整: 点击 之后: 调整完成后:

机器学习——朴素贝叶斯

目录 一、贝叶斯方法 背景知识 贝叶斯公式 二、朴素贝叶斯原理 判别模型和生成模型 1.朴素贝叶斯法是典型的生成学习方法 2.朴素贝叶斯法的基本假设是条件独立性 3.朴素贝叶斯法利用贝叶斯定理与学到的联合概率模型进行分类预测 用于文…

BERT和ChatGPT简单对比

OpenAI发布了第一个版本的GPT(Generative Pretrained Transformer)模型在2018年6月。 谷歌的BERT模型(Bidirectional Encoder Representations from Transformers)是在2018年10月发布的。 BERT和ChatGPT都是由人工智能研究实验室…

FindMy网络帮助您找到电动车

随着科技的发展,我们的生活变得越来越智能化。而现在,这项技术已经深入到了我们的出行方式中。如果你是一位电动车主,那么你可能会遇到一个常见的问题:忘记你的电动车停在了哪里。这种情况在日常生活中时有发生,而现在…

Python - 利用 OCR 技术提取视频台词、字幕

目录 一.引言 二.视频处理 1.视频样式 2.视频截取 ◆ 裁切降帧 ◆ 处理效果 3.视频分段 三.OCR 处理 1.视频帧处理 2.文本识别结果 3.后续工作与优化 ◆ 识别去重 ◆ 多线程提效 ◆ 片头片尾优化 四.总结 一.引言 视频经常会配套对应的台词或者字幕&#xff0c…

git 简单使用说明

git 是什么? 官方的说法自己去官网查,我只说说我浅薄的看法:git是一款用来协同敲代码的工具,方便一群人一起敲代码。 安装 自己去官网下载,b站也是一堆视频 使用前的准备 1.github新建仓库 当然码云也可以&#x…

CSS时间线样式

css实现时间线样式,效果如下图: 一、CSS代码 .timeline {padding-left: 5px} .timeline-item { position: relative;padding-bottom: 20px;} .timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-he…

火爆全网!用 Pyecharts 就能做出来“迁徙图“和“轮播图“

1.pyecharts知识点回顾 1)知识回顾 前面我们已经讲述了,如何使用pyecharts进行图形的绘制,一共涉及到如下四步。我们今天就是按照下面这几步来进行迁徙图和轮播图的绘制。 ① 选择图表类型; ② 声明图形类并添加数据&#xff1…

uni-app基于vite和vue3创建并集成pinia实现数据持久化

一、uni-app基于Vite和Vue3创建并集成pinia实现数据持久化 文章目录 一、uni-app基于Vite和Vue3创建并集成pinia实现数据持久化1.如何创建基于Vite和Vue3的uni-app项目?2.选择其中一个分支,就是一个脚手架 二、以下都是基于vite-ts版本创建和配置1.目录结…

AndroidStudio打包报错记录(commons-logging,keystore password was incorrect)

场景: AndroidStudio2022打包APK的时报错 1.commons-logging依赖冲突 报错主要信息如下 Error: commons-logging defines classes that conflict with classes now provided by Android. 通过报错信息可以看出,项目中的commons-logging与Android系统自带…