vue3+springboot 实现token登录 过期自动退出操作

 

---

 

准备工作

   1.在src创建utils文件夹

•  创建constant.js 放咱们所需的变量

export const TOKEN_TIME = 'tokenTime'

export const TOKEN_TIME_VALUE = 2 * 60 * 60 * 1000

 

---

创建auth.js来放咱们所需的方法

import { TOKEN_TIME, TOKEN_TIME_VALUE } from './constant'

// 登录时设置时间
export const setTokenTime = () => {
  localStorage.setItem(TOKEN_TIME,Date.now())
}

// 获取
export const getTokenTime = () => {
  return localStorage.getItem(TOKEN_TIME)
}

// 是否已经过期
export const diffTokenTime = () => {
  const currentTime = Date.now()
  const tokenTime = getTokenTime()
  return currentTime - tokenTime > TOKEN_TIME_VALUE
}

---

2.在store文件夹新建modules

• 创建app.js 里面内容如下     

import {login as loginApi} from '../../api/login'
import router from '../../router'


//ElLoading一个是加载的小插件，一个是ElMessage弹窗
import { ElLoading,ElMessage } from 'element-plus'

//设置token的登录时间的方法 我们需要引入
import { setTokenTime } from '@/utils/auth'
export default {
   //开启命名空间
  namespaced:true,
  state:() =>({
    //设置静态变量
    token : localStorage.getItem('token') || '',
  }),
  mutations:{
    //提交更新数据的方法
      setToken(state,token){
        state.token = token
        localStorage.setItem('token',token)
      },
  },
  actions:{
    //登录的方法
    login: function ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {

       loginApi(userInfo).then( (res)=> {
         // console.log(res.token)
        //这个就是那个loading 详细过程官方文档有哦
         const loading = ElLoading.service({
           lock: true,
           text: 'Loading',
           background: 'rgba(0, 0, 0, 0.7)'
         })
         setTimeout(() => {
           loading.close()
           ElMessage.success("登录成功")
           //成功之后跳转到咱们的主页
           router.replace('/')
         }, 2000)
            //执行setToken方法
            commit('setToken', res.token)

            //执行setTokenTime方法 设置token的登录时间
             setTokenTime()
            resolve()
          }).catch((err) => {
          reject(err)
        })
      })

    },   
    // 退出
    logout({ commit }) {
      commit('setToken', '')
      localStorage.clear()
      router.replace('/login')
    }
  
  }
}

---

• 在store文件夹下新建getters.js

export default {
  token: (state) => state.app.token,
  siderType: (state) => state.app.siderType,
  lang: (state) => state.app.lang
}

•  最后在store下的index.js使用这俩个模块

import { createStore } from 'vuex'
// @ts-ignore
import app from './modules/app'
// @ts-ignore
import getters from './getters'
export default createStore({
  modules: {
    app
  },
  getters
})

 由此准备工作完成啦 这里采取的分块化 可能会有一点繁琐 但是维护起来就知道多么爽了哈哈哈 

---

开始使用 

 

怎么把咱们的每一次请求都带上token呢 毫无疑问 咱们就要去封装的axios里面操作啦

 1.axios实例类操作

import { diffTokenTime } from '../utils/auth'
import store from '../store'


service.interceptors.request.use(
  (config) => {
    if (localStorage.getItem('token')) {
      if (diffTokenTime()) {
        store.dispatch('app/logout')
        return Promise.reject(new Error('token 失效了'))
      }
    }
    config.headers.Authorization = localStorage.getItem('token')
    return config
  },
  (error) => {
    return Promise.reject(new Error(error))
  }
)

 主要是请求的处理 所以我就直接贴请求部分了

1. 这里的意思是如果获取到的token为空 那就是没有登录
2. 如果有登录 在app.js中的login方法已经将token存在咱们的浏览器了
3. 所以在请求的时候 我们就可以获取到token 下一步执行diffTokenTime()方法
4. 来判断token是否超过限制的登录时间
5. 如果 超出时间 就执行注销操作

---

 

2.修改登录方法 

        既然方法在我们vuex里面了 所以登录的方法也要修改哦 

import { useStore } from 'vuex'

const store = useStore()

store.dispatch('app/login', ruleform.value)

---

3.配置路由守卫

        在router文件下新建permission.js

import router from './index'
import store from '../store'

const whiteList = ['/login']
router.beforeEach((to, from, next) => {
  if (store.getters.token) {
    if (to.path === '/login') {
      next('/')
    } else {
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})

'/'是去登录成功的主页的路由 '  

'/login' 是去登录的路由 

只需要在router的index.js配置以下就好

以上就实现了咱们简单的token登录 过期自动退出啦

欢迎关注点赞收藏！！！！