vue3中,js-cookie的使用 & token之获取token-getToken()、存储token-setToken()、移除token-removeToken()
配置token
src\app\science\config\setting.config.js
/**
* @description 导出通用配置
*/
module.exports = {
// token存储位置localStorage sessionStorage cookie
storage: 'sessionStorage',
tokenTableName: 'saber-access-token',
// token名称
tokenName: 'auth_token',
// tokenName: 'Things-Auth',
// token在localStorage、sessionStorage、cookie存储的key的名称
tokenTableName: 'saber-access-token',
}
src\utils\token.ts
import { storage, tokenTableName } from '@/config/setting.config.js'
import cookie from 'js-cookie'
/**
* @description 获取token
* @returns {string|ActiveX.IXMLDOMNode|Promise<any>|any|IDBRequest<any>|MediaKeyStatus|FormDataEntryValue|Function|Promise<Credential | null>}
*/
export function getToken() {
const token = sessionStorage.getItem('token')
return token
}
export function getBPMToken() {
const config = sessionStorage.getItem('configInfo') || '{}'
const configInfo = JSON.parse(config)
const token = (configInfo && configInfo.bpmTenantToken) || getToken()
return token
}
/**
* @description 存储token
* @param token
* @returns {void|*}
*/
export function setToken(token: string) {
if (storage) {
if ('localStorage' === storage) {
return localStorage.setItem(tokenTableName, token)
} else if ('sessionStorage' === storage) {
return sessionStorage.setItem(tokenTableName, token)
} else if ('cookie' === storage) {
return cookie.set(tokenTableName, token)
} else {
return localStorage.setItem(tokenTableName, token)
}
} else {
return localStorage.setItem(tokenTableName, token)
}
}
/**
* @description 移除token
* @returns {void|Promise<void>}
*/
export function removeToken() {
if (storage) {
if ('localStorage' === storage) {
return localStorage.removeItem(tokenTableName)
} else if ('sessionStorage' === storage) {
return sessionStorage.clear()
} else if ('cookie' === storage) {
return cookie.remove(tokenTableName)
} else {
return localStorage.removeItem(tokenTableName)
}
} else {
return localStorage.removeItem(tokenTableName)
}
}
使用token
<script lang="ts" setup>
import { getToken,setToken,removeToken } from '@src/utils/token'
//获取token
const userInfo = ref({
token: getToken(),
menu: '设置',
})
//设置token
const token = userInfo.access_token
setToken(token)
//移除token
removeToken()
</script>