硅谷甄选_路由鉴权

最新推荐文章于 2024-11-12 16:34:34 发布
最新推荐文章于 2024-11-12 16:34:34 发布
阅读量179 收藏 2
点赞数 10
分类专栏： 智元科技 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41748874/article/details/142823286
版权

文章目录

业务逻辑

分析

怎么在组件外获取仓库数据

对用户没登录和用户登录的鉴权过程

catch里面的语句是什么时候执行呢？

我们对用户登录进行判断：

  • 用户是登录状态的；
    • 用户没有访问login，访问的是其他的路由；
    • 用户信息是没有的
    • 发送请求获取用户信息也是失败的；
  • 这个时候应该执行catch当中的代码，这其实就是token过期了，应该退出登录了；

image-20241010151359290

小优化：进度条优化

image-20241010152021675

小优化：浏览器页签名字优化

但是这样页签的前缀，还是写死了，不好的；

应该用下面的写法：

小优化：过渡动画

image-20241010153225974

小优化：代码删除

其他

硅谷甄选项目源代码_guiguzhenxuan.zip
09-08
硅谷甄选项目源代码_guiguzhenxuan
vue3硅谷甄选本人项目源码，所有功能都已实现，仅供学习交流
06-11
项目：vue3硅谷甄选，整个项目源码 技术栈：vue3，pinia，vue-router4，element-plus，typescript 适合人群：初学vue3，或者需要vue3练手项目的人，有一定的TS基础 能学到什么：你能了解到vue3的整个开发流程，...
【Vue3+Ts项目】硅谷甄选 — 路由配置+登录模块+layout组件+路由鉴权
m0_67992720的博客
12-08 2655
定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?:string// 登录接口返回的数据类型封装本地存储数据和读取方法：src/utils/token.js// 存储数据。
硅谷甄选_进度条效果
浪漫韫秋
10-10 217
npm官网查看nprogress的基本使用，如上；在src下新建了一个。
硅谷甄选_代理跨域_真实接口替换mock接口效果
浪漫韫秋
10-11 399
我们请求的路径是带/api的，但是服务器上的请求路径是没有/api的；不信，你就看看下面的图；你不带关键字，代理服务器是不会帮你转发请求，去给你捞数据的；怎么配置代理跨域，可以查看官网上的内容，比照着进行配置；关键字配置是啥意思？就是你的请求路径上要带关键字；就是如图2的位置，这个，倒是TMD很简单的；利用vite的loadEnv加载配置文件。token过期也要await。
硅谷甄选4（项目主体）
qq_47296476的博客
07-12 926
修改使用规则rules使用自己编写的函数作为规则校验。//定义表单校验需要的配置对象//规则对象属性:/* {required: true, // required,代表这个字段务必要校验的min: 5, //min:文本长度至少多少位max: 10, // max:文本长度最多多少位message: '长度应为6-10位', // message:错误的提示信息。
【Vue3+TS项目】硅谷甄选day04--顶部组件搭建+面包屑+路由鉴权
m0_55644132的博客
05-31 1973
左侧菜单刷新折叠的问题解决---属性default-active折叠之后图标不见：icon放在插槽外面----element的menu属性：collapse顶部tabbar静态组件封装：拆分为左侧面包屑、右侧设置区域面包屑组件：project\src\layout\tabbar\breadcrumb\index.vue右侧设置组件：project\src\layout\tabbar\setting\index.vue菜单折叠的实现。
硅谷甄选四（token）
m0_56769104的博客
07-05 614
/小仓库存储数据地方return {token: GET_TOKEN(), //用户唯一标识tokenmenuRoutes: constantRoute,//仓库存储生成菜单需要的数组（路由）avatar: ''},//定义小仓库数据state类型//登录接口需要携带参数类型//定义全部接口返回数据都有的数据类型//定义登录接口返回数据类型//定义获取用户信息返回的数据类型data: {
前端项目硅谷甄选 视频教程 下载
2401_84572204的博客
07-01 545
008_vue3组件通信方式之provide与inject.mp4。007_vue3组件通信方式之ref与$parent.mp4。009_vue3组件通信方式之pinia选择式API.mp4。010_vue3组件通信方式之pinia组合式API.mp4。006_vue3组件通信方式之useAttrs方法.mp4。004_vue3组件通信方式之全局事件总线.mp4。002_vue3组件通信方式之props.mp4。003_vue3组件通信方式之自定义事件.mp4。
硅谷甄选笔记(9-2开始学习中)
@追求卓越
09-03 987
1.在template直接使用width,在setup使用是pro.wid;2.两种方式都可以.这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。安装SVG依赖插件测试SVG图标使用svg:图标外层容器节点, 内部需要与use标签结合使用在vite.config.ts中配置插件。
【Vue3+Ts项目】硅谷甄选 — 品牌管理+平台属性管理+SPU管理+SKU管理
m0_67992720的博客
01-09 1929
/ 已有的品牌的ts数据类型id: number// 包含全部品牌数据的ts类型// 获取的已有全部品牌的数据ts类型data: {orders: []......enum API {......// 添加品牌// 修改已有品牌// 添加与修改已有品牌接口方法// 修改已有品牌的数据} else {// 新增品牌SPU：电商术语，代表的是一个标准化产品单元。（类）SPU组成：产品品牌名称+描述+产品图片介绍+销售属性【整个项目销售属性一共三个：颜色、版本、尺码】
发布职位：小鹏#_造车新势力中自动驾驶做得最好的。__base：硅谷圣地亚哥_广北深__技术路线：智_-.zip
09-02
发布职位：小鹏#_造车新势力中自动驾驶做得最好的。__base：硅谷圣地亚哥_广北深__技术路线：智_-
Vue中的常用指令
m0_62388400的博客
11-12 913
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 645
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 844
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue实际应用之无限滚动、css之&、混合宏和~
最新发布
swj的博客
11-12 498
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
速盾：vue的cdn是干嘛的？
zhuguowang01的博客
11-08 386
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
vue3组件应用 + 以及组件相关知识应用
m0_51244077的博客
11-08 1024
vue3组件应用 + 以及组件相关知识应用
vue3项目中内嵌vuepress工程两种实现方式
xiaopiaoliang777的博客
11-11 463
vue3项目启动vuepress
尚硅谷vue硅谷甄选
08-21
你好！对于尚硅谷的Vue硅谷甄选课程，我了解到它是一门面向Vue前端开发的培训课程。它旨在教授Vue框架的基本知识和高级技巧，包括组件化开发、路由管理、状态管理等内容。这门课程是由尚硅谷教育机构提供的，他们有丰富的在线教育经验，并且在Vue领域拥有一支专业的师资团队。如果你对Vue前端开发感兴趣，可以考虑参加尚硅谷的Vue硅谷甄选课程来提升自己的技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值