Vue3+TS 在线考勤系统-10_获取用户信息

最新推荐文章于 2024-09-11 22:09:42 发布
最新推荐文章于 2024-09-11 22:09:42 发布
阅读量45 收藏
点赞数
分类专栏： vue3 + ts 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44562304/article/details/139198409
版权
该博客介绍了如何在 Vue3+TS 项目中实现用户信息的获取以及权限管理。通过使用 axios 创建实例并添加请求拦截器，在每次请求时自动添加 token。同时展示了 vuex 中如何定义状态、 mutations、actions 和 getters 以处理用户登录、获取用户信息和权限检查。在路由守卫中，检查用户是否有权限访问特定页面，并在 token 出错时进行相应处理。
摘要由CSDN通过智能技术生成

安装JS库 lodash

1. Lodash 是一个"JavaScript"<

了解本专栏 订阅专栏 解锁全文 超级会员免费看
goushengbo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
Vue3+TS 在线考勤系统-12_首页导航菜单和主体区域
weixin_44562304的博客
05-25 53
template>导航面包屑--基础用法-->separator"/"homepagehomepage
在线考勤系统-后端API文档.zip
05-24
在线考勤系统-后端API文档.zip
Vue3+Element-Plus || el-calendar考勤日历
weixin_45862553的博客
02-02 3729
日历放在#header插槽内，额外内容放在#date-cell插槽内
Vue3+TS 在线考勤系统-1_后端API文档
weixin_44562304的博客
05-23 735
在线考勤系统-后端API文档 基础 URL: http://api.h5ke.top/ 用户登录: POST http://api.h5ke.top/users/login body 用户1_黄蓉: { "email":"huangrong@imooc.com", "pass":"huangrong" } 用户2_洪七公: { "email":"hongqigong@imooc.com", "pass":"hongqigong" } 请
Vue3+TS 在线考勤系统-3_构建路由及对应组件
weixin_44562304的博客
05-23 431
在页面组件中定义组件名称。关闭组件命名规则检查。
Vue3+TS 在线考勤系统-6_搭建登录界面
weixin_44562304的博客
05-25 42
零基础从入门到进阶，系统掌握前端三大热门技术。复制 iconfont.css 文件。复制 iconfont.ttf 文件。
Vue3+TS 在线考勤系统-11_首页布局
weixin_44562304的博客
05-25 56
去除选中时的黑色边框。菜单项被选中时的样式。
Vue3+TS 在线考勤系统-2_脚手架及第三方模块的安装
weixin_44562304的博客
05-23 402
创建项目。
Vue3+TS 在线考勤系统-7_表单验证
weixin_44562304的博客
05-25 39
零基础从入门到进阶，系统掌握前端三大热门技术。零基础从入门到进阶，系统掌握前端三大热门技术。零基础从入门到进阶，系统掌握前端三大热门技术。零基础从入门到进阶，系统掌握前端三大热门技术。一键登录按钮的事件函数。表示在失去焦点时触发。请输入正确的邮箱格式。表示占用网格数的一半。表示占用网格数的一半。表示在失去焦点时触发。请输入正确的邮箱格式。表示占用网格数的一半。表示在失去焦点时触发。请输入正确的邮箱格式。表示占用网格数的一半。表示在失去焦点时触发。请输入正确的邮箱格式。
Vue3+TS 在线考勤系统-资料包
05-25
Vue3+TS 在线考勤系统是一个现代前端技术构建的高效、可维护的考勤管理系统。这个资料包可能包含了开发此类系统的全方位资源，包括代码、文档、示例和教程。让我们深入探讨Vue3和TypeScript在构建在线考勤系统中的...
Vue3+TS 在线考勤系统-5_共享状态管理
weixin_44562304的博客
05-25 97
在外部模块的同步操作中使用类型限定。在外部模块的同步操作中使用类型限定。在外部模块的同步操作中使用类型限定。在外部模块的同步操作中使用类型限定。在外部模块的同步操作中使用类型限定。对外接口使用泛型限定。对外接口使用泛型限定。
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 1737
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 410
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 246
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 191
实现中国地图各省数据案例
Vue接入高德地图并实现基本的路线规划功能
最新发布
黄团团的个人博客
09-11 126
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
JS笔记
2201_76100326的博客
09-11 437
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 87
动态在本地引入图片
vue3+ts+vite vue-draggable-next 按钮在区域内任意移动
07-15
在 Vue 3 + TypeScript + Vite 中使用 vue-draggable-next 插件实现按钮在区域内任意移动的功能，你可以按照以下步骤进行操作： 1. 确保你已经安装了 Vue 3、TypeScript 和 Vite，并且已经创建了一个 Vue 3 + TypeScript + Vite 的项目。 2. 在项目根目录下，通过命令行安装 vue-draggable-next： ```bash npm install vue-draggable-next ``` 3. 在你的 Vue 组件中，首先导入所需的库和类型： ```typescript import { defineComponent, ref } from 'vue'; import { draggable } from 'vue-draggable-next'; ``` 4. 创建一个包含按钮的区域容器，并在容器内部使用 `draggable` 组件来包裹按钮。将 `v-model` 指令绑定到按钮的位置属性。 ```typescript export default defineComponent({ components: { draggable }, setup() { const buttonPosition = ref({ x: 0, y: 0 }); return { buttonPosition }; } }); ``` 5. 在模板中使用 `draggable` 组件和按钮。 ```html <template> <div class="container"> <draggable v-model="buttonPosition" :bounds="containerBounds"> <button class="button">移动按钮</button> </draggable> </div> </template> ``` 6. 添加样式，确保容器具有适当的宽度、高度和边界。 ```html <style> .container { position: relative; width: 500px; height: 500px; border: 1px solid #ccc; } .button { position: absolute; left: 0; top: 0; } </style> ``` 通过以上步骤，你就可以在 Vue 3 + TypeScript + Vite 中使用 vue-draggable-next 插件来实现按钮在区域内任意移动的功能。这样，按钮的位置将随着拖动而改变，并受到容器边界的限制。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值