首页 > 其他分享 >VUE学习笔记(十三)-token过期时间处理

VUE学习笔记(十三)-token过期时间处理

时间:2024-05-29 10:56:50浏览次数:19  
标签:VUE return 过期 token api export key const

token过期时间处理

添加jwt指令

yarn add jsonwebtoken或者npm install jsonwebtoken -S

yarn add node-polyfill-webpack-plugin

src/auth/auth.service.js

import axios from "@/api/api_config"
import router from '@/router'
import * as jwt from 'jsonwebtoken'
//登陆

export const  loginUser=async(login)=>{
    return await axios.post('Users/auth',login)
}

const key='tokenAnt'
//从浏览器本地存储获取token值
export const getToken=()=>{
    return localStorage.getItem(key)
}

//清除token
export const logOut=()=>{
    //localStorage.clear()
    localStorage.removeItem(key)
    router.replace('/login')
}

//设置token,不需要,因为只有用到一次
//检查token过期时间
export const isTokenFromLocalStorageVaild=()=>{
    const token=localStorage.getItem(key)
    if(!token)return false
    const decoded=jwt.decode(token)
    //时间戳分为10位(秒级)和13位(毫秒级)
    const dateNow=Date.now()
    const expiresAt=decoded.exp*1000
    return dateNow<=expiresAt
}

最外层的vue.config.js

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin=require('node-polyfill-webpack-plugin')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      "/api": {
        target: "https://localhost:7107/api/", //服务器请求地址
        secure: false, //如果是https接口,需要配置这个参数
        changeOrigin: true, //请求头host属性,false表示不修改,发真实本机过去,true表示修改,修改为服务器地址,会把host成target
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
  configureWebpack:{
    plugins:[new NodePolyfillPlugin()]
  }
});

 

标签:VUE,return,过期,token,api,export,key,const
From: https://www.cnblogs.com/Lvkang/p/18219723

相关文章

  • VUE学习笔记(十四)-调整axios拦截器
    调整axios拦截器src/api/api_config.jsimportaxiosfrom"axios";import{getToken}from"@/auth/auth.service";import{ElMessage}from'element-plus'axios.defaults.baseURL="http://localhost:8080/api";axios.defau......
  • VUE学习笔记(十五)-退出功能
    退出功能src/views/LayoutView.vue<template><el-containerclass="layout-container-demo"><el-asidewidth="200px"><el-scrollbar><divclass="mb-2logo">Vue+WEBAPI</div>......
  • VUE学习笔记(八)
    登录页设计src下新建auth文件夹,新建auth.service.js,auth文件夹下新建views文件夹,view文件夹下新建UserLogin.vueUserLogin.vue<template><divclass="login"><divclass="body"><divclass="container">......
  • VUE学习笔记(九)
    登录数据数据验证,学习elementplus组件种页面数据验证UserLogin.vue页面<template><divclass="login"><divclass="body"><divclass="container"><h2>用户登陆</h2>......
  • 解决Vue3项目使用多个根标签提示[vue/no-multiple-template-root]The template root r
    报错截图检查原因第一步:检查是否安装了 Vetur 插件 第二步:左下角设置图标 ==》设置第三步:进入设置页面搜索eslint把Vetur的验证模板,取消勾选 Validatevue-htmlinusingeslint-plugin-vue第四步:将错误提示页面关掉然后重新打开,即可正常显示......
  • VUE学习笔记(六)
    数据添加、修改、watch监听和删除数据添加AddCategory.vue<template><el-dialogv-model="dialogVisible":title="dialogTitle"width="500":before-close="handleClose"><el-form:model="ruleFroms"......
  • vue3项目中 路由elementPlus当中的标签页结合封装
    在项目当中大家应该都有看到过,像标签页一样的面包屑吧,接下来我为大家介绍一下,主要组成部分:路由+组件库的标签页。ok就这么easy!!!它实现的方法也不难哦请看效果图ok,在中间实现思路与大家分享一下:主要是使用watch监听我们的route路由的变化,然后根据传递过来的路由信息,进行标签页......
  • VUE学习笔记(五)
    defineprops和torefs的使用用法,从父组件(Category.vue)向子组件(AddCategory.vue)传输数据Category.vue<template><el-cardclass="box-card"><template#header><divclass="card-header"><s......
  • vue前端页面搭建
    十、页面搭建学习10.1安装element在这里看一下有没有elementui,有就是下载成功了。10.2mainjs全局引入importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)10.3简单试用运行serve10.4页面布局(都可以直接查......
  • vue 项目发布到docker
    在vue项目目录下执行npmrunbuild 会生成dist文件夹,dist文件夹中的内容就是包含了打包好的静态文件 写dockerfile FROMnginx#将本地的dist文件夹复制到nginx默认的静态文件目录COPY./dist/usr/share/nginx/html执行 dockerbuild-tmy-vue-app.  ......