vue获取token(设置token,清除token)实现登录方式

 更新时间:2023年08月08日 10:04:18   作者:~浮生  
这篇文章主要介绍了vue获取token(设置token,清除token)实现登录方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue获取token(设置token,清除token)实现登录

使用token做登录验证

1、登录的时候前端调用后端的接口,把用户名和密码传给后端。

2、后端收到请求,验证用户名和密码,返回给前端一个token值。

3、前端收到后端传给的token值,将token存储在本地 有3种方法我们选用  sessionStorage

  • cookie :可设置失效时间,否则默认为关闭浏览器后消失
  • localStorage :除非被手动清除,否则永久保存
  • sessionStorage:仅在当前网页会话下有效,关闭页面或浏览器后就会被清除

在utils中创建auth.js用来封装方法

//设置token
export function setToken(token) {
    // token 代表要存储到本得的值
	return sessionStorage.setItem("储存到本地的名字", token)
}
//获取token
export function getToken() {
	return sessionStorage.getItem("储存到本地的名字")
}
//清除token
export function removeToken() {
	return sessionStorage.removeItem("要清除的名字")
}

在min.js全局引入

import {
	getToken,
	setToken,
	removeToken
} from '@/utils/auth'

vue中token的处理

传统的token处理

直接存储到localstorage或者sessionStorage中,缺点:

1 数据并非响应式,需要进行特殊处理

2 存取麻烦,在存储对象数组类型的时候要用JSON转换为JSON类型的字符串

VUEX的存储方法

通过mutations定义的函数将数据存储到Vuex的state中

缺点: 数据存储的有效时间短,刷新页面数据消失

项目中的token处理方法

两者结合,加上封装本地存储模块

本地存储模块:

// 封装本地存储模块
 
// 存储数据
export const setItem = (key, val) => {
  // 对象或数组要进行转换
  if (typeof val === 'object') {
    val = JSON.stringify(val)
  }
  localStorage.setItem(key, val)
}
 
// 获得数据
export const getItem = (key) => {
  const data = localStorage.getItem(key)
  // 处理localStorage内的数据
  // 不需要async
  try {
    return JSON.parse(data)
  } catch {
    return data
  }
}
 
// 删除数据
export const removeItem = (key) => {
  localStorage.removeItem(key)
}

导出了存储数据,获取数据,和删除数据的函数,数据的转换在这里进行

 Vuex

import Vue from 'vue'
import Vuex from 'vuex'
// 导入本地存储的模块
import { setItem, getItem } from '@/assets/utils/storeage'
 
Vue.use(Vuex)
 
const tokenKey = 'user'
 
export default new Vuex.Store({
  state: {
    // 一个对象用于存储当前登录用户信息里面包含token等数据
    user: getItem(tokenKey)
  },
  mutations: {
    saveToken(state, data) {
      state.user = data
      // 为了防止刷新丢失需要把数据备份到本地存储
      setItem(tokenKey, state.user)
    }
  },
  actions: {},
  modules: {}
})

实现了本地数据存储只是用来延长token存在的时间其他的一切操作都是用vuex内的state.user内的数据来进行  

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • element-ui table使用type='selection'复选框全禁用(全选禁用)详解

    element-ui table使用type='selection'复选框全禁用(全选禁用)详解

    element-ui中的table的多选很好用,但是如果其中某一项禁止选择,该怎样操作呢,下面这篇文章主要给大家介绍了关于element-ui table使用type='selection'复选框全禁用(全选禁用)的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue watch普通监听和深度监听实例详解(数组和对象)

    vue watch普通监听和深度监听实例详解(数组和对象)

    这篇文章主要介绍了vue watch普通监听和深度监听(数组和对象),文中单独通过代码给大家介绍了vue watch 深度监听的方法,感兴趣的朋友一起看看吧
    2018-08-08
  • .eslintrc配置目录及配置项的使用方式

    .eslintrc配置目录及配置项的使用方式

    这篇文章主要介绍了.eslintrc配置目录及配置项的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue中tinymce的使用实例详解

    vue中tinymce的使用实例详解

    TinyMCE Vue是TinyMCE官方发布的Vue组件,可以更轻松地在Vue应用程序中使用TinyMCE,这篇文章主要介绍了vue中tinymce的使用,需要的朋友可以参考下
    2022-11-11
  • vue子组件使用自定义事件向父组件传递数据

    vue子组件使用自定义事件向父组件传递数据

    这篇文章主要介绍了vue子组件使用自定义事件向父组件传递数据的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • vue如何使用watch监听指定数据的变化

    vue如何使用watch监听指定数据的变化

    这篇文章主要介绍了vue如何使用watch监听指定数据的变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue2.0 实现导航守卫(路由守卫)

    vue2.0 实现导航守卫(路由守卫)

    vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。这篇文章主要介绍了vue2.0 实现导航守卫(路由守卫)的相关知识,需要的朋友可以参考下
    2018-05-05
  • Vue中map()的用法案例

    Vue中map()的用法案例

    map()函数定义在JS的array中,它返回一个新的数组,下面这篇文章主要给大家介绍了关于Vue中map()的用法案例,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue3 源码解读静态提升详解

    Vue3 源码解读静态提升详解

    这篇文章主要为大家介绍了Vue3源码解读静态提升示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue.directive 自定义指令的问题小结

    Vue.directive 自定义指令的问题小结

    这篇文章主要介绍了Vue.directive 自定义指令的问题小结,需要的朋友可以参考下
    2018-03-03

最新评论