vue获取token(设置token,清除token)实现登录方式
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
使用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内的数据来进行
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)