zdppy+vue3+onlyoffice文档管理系统实战 20240903 上课笔记 登录功能完成

本文主要是介绍zdppy+vue3+onlyoffice文档管理系统实战 20240903 上课笔记 登录功能完成,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

接下来

  • 1、注销功能:点击注销按钮,清除登录信息跳转到登录页面
  • 2、token过期

注销功能

useUser.js

import storage from "../../g/storage.js";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";export default function useUser() {const router = useRouter()// 注销const logout = () => {storage.delete("userid")storage.delete("username")storage.delete("token")message.success("退出登录成功")router.push("/login")}return {logout,}
}

处理菜单点击:

import {ref} from 'vue';
import useUser from "./useUser.js"const {logout} = useUser()const selectedKeys = ref(['latest']);// 处理菜单点击
const handleMenuClick = ({key}) => {switch (key) {case 'user-logout':logout()break}
}

头像变成用户名首字母

简单实现:

const avatar = () => {const username = storage.get("username") || "U"return username.charAt(0).toUpperCase()
}

vue3计算属性

在 Vue 3 中,计算属性(computed properties)是一种特殊类型的依赖项,它们根据响应式数据的变化自动重新计算值。计算属性非常适合用于当你需要根据现有数据派生出一些状态时。

以下是 Vue 3 中使用计算属性的简单示例:

<template><div><p>价格: {{ product.price }}</p><p>含税价格: {{ totalPrice }}</p></div>
</template><script setup>
import { computed, ref } from 'vue';const product = ref({name: 'Vue 3 Guide',price: 100
});// 计算属性,用于计算含税总价
const totalPrice = computed(() => {return product.value.price * 1.15; // 假设税率为 15%
});
</script>

在这个示例中:

  • 使用 ref 创建了一个响应式的数据对象 product,它包含产品名称和价格。
  • 使用 computed 创建了一个计算属性 totalPrice,它基于 product 的价格计算含税后的总价。这里假设税率为 15%。
  • 在模板中,我们展示了产品的价格和含税价格。

计算属性 totalPrice 会根据 product.price 的变化自动更新。当 product.price 发生变化时,任何依赖于 totalPrice 的视图都会自动更新。

计算属性是惰性的,只有在它们所依赖的响应式数据发生变化时才会重新计算。这使得计算属性非常高效,并且它们是缓存的,只有当依赖项发生变化时,计算属性的值才会重新计算。

请注意,<script setup> 是 Vue 3 引入的一个新的脚本语法糖,它使得组件的编写更加简洁。如果你使用的是传统的 export default 语法,那么你需要稍微调整代码:

export default {data() {return {product: {name: 'Vue 3 Guide',price: 100}};},computed: {totalPrice() {return this.product.price * 1.15; // 假设税率为 15%}}
};

在这个传统语法的示例中,计算属性 totalPrice 被定义在 computed 选项中,并且可以通过 this.product 访问响应式数据 product

计算属性版本的头像

核心代码:

const totalPrice = computed(() => {return product.value.price * 1.15; // 假设税率为 15%
});

头像代码:

const avatar = computed(() => {const username = storage.get("username") || "U"return username.charAt(0).toUpperCase()
})

简写代码:

const avatar = computed(() => (storage.get("username") || "U").charAt(0).toUpperCase())

当前界面

在这里插入图片描述

接下来

  • 1、数据的请求是没有权限的,我们应该要验证权限
  • 2、必须要登录才能请求数据,Token必须有效
  • 3、前端要把登录Token传递后端

问题:我们会有非常多的接口,我们是每个接口都手动把Token传递进去吗?

回答:这是比较low的写法,Axios有一个拦截器的功能,我们可以在拦截器中,统一设置携带Token。

axios拦截器

在 JavaScript 中,使用 Axios 进行 HTTP 请求时,可以设置请求拦截器和响应拦截器来统一处理请求和响应。这在处理认证、记录日志、统一格式化数据等场景中非常有用。

以下是 Axios 请求拦截器和响应拦截器的简单示例:

安装 Axios

首先,确保你已经安装了 Axios。如果还没有安装,可以使用 npm 或 yarn 来安装:

npm install axios

或者

yarn add axios

设置拦截器

import axios from 'axios';// 请求拦截器
axios.interceptors.request.use(config => {// 在发送请求之前做些什么,例如添加认证头const token = localStorage.getItem('user-token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么if (error.response && error.response.status === 401) {// 例如,处理 401 未认证错误console.log('未认证,需要重新登录');}return Promise.reject(error);}
);// 使用 Axios 发送请求
axios.get('/api/data').then(response => {console.log('数据获取成功:', response.data);}).catch(error => {console.error('数据获取失败:', error);});

在这个示例中:

  • 请求拦截器:在发送请求之前,检查本地存储中是否存在 token,并将其添加到请求头中。如果 token 存在,请求头中将包含 Authorization 字段。
  • 响应拦截器:在收到响应后,根据响应状态进行处理。例如,如果响应状态码为 401(未认证),可以记录日志或执行其他操作。

详细说明

  1. 请求拦截器

    • 使用 axios.interceptors.request.use 方法设置请求拦截器。
    • 第一个参数是一个函数,它接收 config 对象作为参数,你可以在发送请求之前修改它,例如添加或修改请求头。
    • 第二个参数是一个处理错误的函数,如果请求配置出错,可以在这里处理。
  2. 响应拦截器

    • 使用 axios.interceptors.response.use 方法设置响应拦截器。
    • 第一个参数是一个函数,它接收 response 对象作为参数,你可以在处理响应数据之前对其进行操作。
    • 第二个参数是一个处理错误的函数,如果响应出错,可以在这里处理。
  3. 发送请求

    • 使用 axios.get 方法发送 GET 请求,并使用 thencatch 处理成功和失败的情况。

总结

拦截器是 Axios 中非常强大的功能,它们允许你在请求发送之前和响应返回之后统一处理逻辑。这在处理认证、日志记录、错误处理等场景中非常有用。通过设置拦截器,你可以避免在每个请求和响应中重复相同的代码,从而使代码更加简洁和易于维护。

axios创建实例对象

在 Axios 中,你可以创建一个实例对象来配置特定的 axios 实例。这在你需要为应用的不同部分设置不同的基础 URL、头部或超时时间等配置时非常有用。

以下是如何创建 Axios 实例对象的示例:

import axios from 'axios';// 创建 axios 实例
const instance = axios.create({baseURL: 'https://api.example.com', // 设置默认的基础 URLtimeout: 1000, // 设置默认的超时时间headers: {'X-Custom-Header': 'foobar'} // 设置默认的请求头
});// 使用实例发送请求
instance.get('/data').then(response => {console.log('数据获取成功:', response.data);}).catch(error => {console.error('数据获取失败:', error);});// 你可以为实例添加拦截器
instance.interceptors.request.use(config => {// 在发送请求之前做些什么config.headers['Authorization'] = `Bearer your-token`;return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);instance.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么return Promise.reject(error);}
);

在这个示例中:

  • 使用 axios.create() 方法创建了一个 Axios 实例。
  • baseURL 设置了所有请求的默认基础 URL。
  • timeout 设置了所有请求的默认超时时间(以毫秒为单位)。
  • headers 设置了所有请求的默认请求头。
  • 使用实例对象 instance 发送了一个 GET 请求。
  • 为实例对象添加了请求拦截器和响应拦截器。

创建实例对象的好处是你可以针对不同的 API 端点或不同的请求需求设置不同的配置,而不必在每次请求时都设置这些配置。这使得代码更加模块化和可重用。

此外,Axios 实例也是可配置的,这意味着你可以在实例的基础上进一步定制化,例如添加特定的拦截器或配置项。这在构建大型应用时非常有用,因为它允许你为不同的 API 模块或功能创建不同的 Axios 实例。

封装axios

import axios from "axios";
import storage from "./storage.js";// 全局HTTP请求对象
const req = axios.create({baseURL: 'http://127.0.0.1:18888', // 设置默认的基础 URLtimeout: 3000, // 设置默认的超时时间headers: {'Content-Type': 'application/json'} // 设置默认的请求头
});// 请求拦截器
req.interceptors.request.use(config => {// 添加统一的tokenconst token = storage.get("token") || ""if (token) {config.headers.Authorization = token}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 导出
export default req;// 响应拦截器
req.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么if (error.response && error.response.status === 401) {// 例如,处理 401 未认证错误console.log('未认证,需要重新登录');}return Promise.reject(error);}
);

这篇关于zdppy+vue3+onlyoffice文档管理系统实战 20240903 上课笔记 登录功能完成的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1134938

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Security OAuth2 单点登录流程

单点登录(英语:Single sign-on,缩写为 SSO),又译为单一签入,一种对于许多相互关连,但是又是各自独立的软件系统,提供访问控制的属性。当拥有这项属性时,当用户登录时,就可以获取所有系统的访问权限,不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议(LDAP)来实现,在服务器上会将用户信息存储到LDAP数据库中。相同的,单一注销(single sign-off)就是指

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time