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>