Token持久化

598 阅读1分钟

Token持久化

1 整体思路

image.png

2 封装

创建localStorage.js文件

image.png

// 消除魔法字符串
const TOKEN_NAME = 'my-token-name'
// 将token保存到localStorage
export const setToken = (token) => {
  localStorage.setItem(TOKEN_NAME, JSON.stringify(token))
}
// 得到localStorage中的token
export const getToken = () => {
  return JSON.parse(localStorage.getItem(TOKEN_NAME))
}
// 删除localStorage中名字为'my-token-name'的token
export const delToken = () => {
  localStorage.removeItem(TOKEN_NAME)
}

3 测试

main.js中测试是否成功

import { setToken } from '@/utils/localStorage.js'
setToken ('111')

在控制台查看

image.png 测试获取和删除token方法同理

4 扩展 消除魔法字符串

指在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。

image.png