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

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()]
  }
});