Django5+Vue3:OA系统前后端分离项目实战-Pinia用户和token信息管理(11)

Django5+Vue3系列文章

前言

本节开始，全文仅对会员开放。

若点赞和收藏数量超过100，全文将免费开放。

 此项目采用 Django 框架的 5.0.7 版本进行开发。

Django 5.0 支持的 Python 版本为 3.10、3.11 和 3.12。

OA 系统系列文章将持续更新，直至项目的 Docker 部署阶段。

专栏链接:  ~快捷传送门: 留个赞再走呗😭! ~

个人博客: ~所有文章尽在简客免费阅读~

文章目录

目录

Django5+Vue3系列文章

前言

文章目录

一、Pinia信息存储

1.新建src\stores\auth.js文件，初始化Pinia的store：

2.定义计算属性

3.返回对象 

二、login.vue优化

1.导入自定义Pinia状态管理库

2.创建useAuthStore对象

3.设置用户信息和Token

4.添加路由跳转 

(1)导入useRouter并创建实例

(2)路由跳转至OA系统首页

三、localStorage检测

1.终端运行vue3项目，进入登录页面

总结

一、Pinia信息存储

由于初始化vue3项目初始化时就引用了Pinia进行状态管理，此处不做Pinia安装的额外赘述

1.新建src\stores\auth.js文件，初始化Pinia的store：

代码如下（示例）：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

const USER_KEY = "OA_USER_KEY"
const TOKEN_KEY = "OA_TOKEN_KEY"

export const useAuthStore = defineStore('auth', () => {
  let _user = ref({})
  let _token = ref("")
  
  function setUserToken(user, token){
    // 保存到对象上(内存上)
    _user.value = user;
    _token.value = token;

    // 保存到浏览器的localStorage中（硬盘上）
    // localStorage只能存储字符串，而此处的user为对象，所以需要先使用JSON.stringify转换成字符串
    localStorage.setItem(USER_KEY,JSON.stringify(user))
    localStorage.setItem(TOKEN_KEY,token)    
  }

  function clearUserToken(){
    _user.value = {}
    _token.value = ""
    localStorage.removeItem(USER_KEY)
    localStorage.removeItem(TOKEN_KEY)
  }
}

在内存和硬盘上存储用户信息的好处主要包括：

1. 快速访问：内存中的数据可以快速读取。
2. 持久性：硬盘上的数据即使在浏览器关闭后依然存在。
3. 减少服务器请求：避免每次访问都需要从服务器获取数据。