一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第6天,点击查看活动详情。
日常的开发中,我们经常需要对Token操作,比如在localStorage中添加Token,获取Token等等,然后通过Token来做后面的逻辑操作
多次复用的逻辑代码,我们把它封装起来,做到开箱即用
在utils/storage.ts中的代码
// 本地持久化 token:{refresh_token, token}
import { Token } from '@/types/data'
// 消除魔法字符串
const TOKEN_KEY = 'itcast_geek_h5'
export function getToken () : Token {
return JSON.parse(localStorage.getItem(TOKEN_KEY) || '{}')
}
// 保存token
export function setToken (token: Token) {
localStorage.setItem(TOKEN_KEY, JSON.stringify(token))
}
//删除token
export function removeToken () :void {
localStorage.removeItem(TOKEN_KEY)
}
//判断token
export function hasToken () :boolean {
return !!getToken().token //双重取反====强制转换为布尔类型
}
然后我们需要在组件中,操作localStorage里的token,只需要导入文件中对应的函数即可
如果在React和Vue中使用,只需要把这段代码中的类型删掉即可