Laravel+Vue 问答平台项目实战前端 - 前端本地存储

用户经过注册登陆后，会接收到后端返回的认证令牌token，前端需要在本地保存这个令牌，在后续的http请求时，需要在header中带上令牌。用来访问后端认证保护的接口地址，比如获取用户信息接口

本文将使用一个store库来实现本地缓存

Store 官网文档地址

安装

在前端项目ant-qa-front根目录下执行npm命令

npm install store -S

使用

store提供了一些简单的API，可以实现本地缓存。

// 设置用户信息
store.set('user', { name:'Marcus' })

// 读取用户信息
store.get('user')

// 删除用户信息
store.remove('user')

// 清空本地缓存
store.clearAll()

在构建ant-qa-front前端项目时，已经创建src/utils/store.js用于本地存储。编辑此文件

import storage from 'store'

const ACCESS_TOKEN = 'ant-qa-token'

function get() {
  return storage.get(ACCESS_TOKEN)
}

function set(token, time=0) {
  if (time === 0) {
    time = 7 * 24 * 60 * 60 * 1000
  }
  storage.set(ACCESS_TOKEN, token, time)
}

function remove() {
  storage.remove(ACCESS_TOKEN)
}

export default {
  get,
  set,
  remove
}

上一篇 [Laravel+Vue 问答平台项目实战 - 前端路由](Laravel+Vue 问答平台项目实战前端3 - 前端本地存储)

下一篇 Laravel+Vue 问答平台项目实战前端 - 前端请求