电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別

瀏覽:45日期:2022-10-17 18:16:01

在Vue項(xiàng)目中,有兩種用戶(hù)登錄狀態(tài)判斷并處理的情況,分別為:導(dǎo)航守衛(wèi)和axios攔截器。

一、什么是導(dǎo)航守衛(wèi)?

vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。(在路由跳轉(zhuǎn)時(shí)觸發(fā))

我們主要介紹的是可以驗(yàn)證用戶(hù)登錄狀態(tài)的全局前置守衛(wèi),當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí),全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行,此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于等待中。

const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...})

 每個(gè)守衛(wèi)方法接收三個(gè)參數(shù):

to: 即將要進(jìn)入的目標(biāo)路由對(duì)象

from: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)。

next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。 next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶(hù)手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。 next(’/’) 或者 next({ path: ’/’ }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航 next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例,則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過(guò)的回調(diào)。

注意:一定要確保要調(diào)用 next 方法,否則鉤子就不會(huì)被 resolved。

二、什么是axios攔截器?

在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們,分為請(qǐng)求攔截器(發(fā)送請(qǐng)求前觸發(fā))和響應(yīng)攔截器(得到響應(yīng)結(jié)果后觸發(fā))。(在請(qǐng)求接口調(diào)用時(shí)觸發(fā))

// 添加請(qǐng)求攔截器axios.interceptors.request.use(function (config) { // 在發(fā)送請(qǐng)求之前做些什么 return config; }, function (error) { // 對(duì)請(qǐng)求錯(cuò)誤做些什么 return Promise.reject(error); }); // 添加響應(yīng)攔截器axios.interceptors.response.use(function (response) { // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response; }, function (error) { // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么 return Promise.reject(error); });

注意:一定要有返回值

三、導(dǎo)航守衛(wèi)和攔截器的使用

用戶(hù)登錄成功后我們將后臺(tái)返回的用戶(hù)token信息存儲(chǔ)至sessionStorage中

vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別

路由跳轉(zhuǎn)時(shí)使用導(dǎo)航守衛(wèi)

vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別

以上就是vue 導(dǎo)航守衛(wèi)和axios攔截器有哪些區(qū)別的詳細(xì)內(nèi)容,更多關(guān)于vue 導(dǎo)航守衛(wèi)和axios攔截器的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: IOS
相關(guān)文章:
主站蜘蛛池模板: 电磁铁_推拉电磁铁_机械手电磁吸盘电磁铁厂家-广州思德隆电子公司 | 快速门厂家批发_PVC快速卷帘门_高速门_高速卷帘门-广州万盛门业 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 液压扳手-高品质液压扳手供应商 - 液压扳手, 液压扳手供应商, 德国进口液压拉马 | 托盘租赁_塑料托盘租赁_托盘出租_栈板出租_青岛托盘租赁-优胜必达 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 河南橡胶接头厂家,河南波纹补偿器厂家,河南可曲挠橡胶软连接,河南套筒补偿器厂家-河南正大阀门 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 磁力反应釜,高压釜,实验室反应釜,高温高压反应釜-威海自控反应釜有限公司 | 德州万泰装饰 - 万泰装饰装修设计软装家居馆 | 绿叶|绿叶投资|健康产业_绿叶投资集团有限公司 | 成都顶呱呱信息技术有限公司-贷款_个人贷款_银行贷款在线申请 - 成都贷款公司 | Boden齿轮油泵-ketai齿轮泵-yuken油研-无锡新立液压有限公司 | 不锈钢/气体/液体玻璃转子流量计(防腐,选型,规格)-常州天晟热工仪表有限公司【官网】 | 色谱柱-淋洗液罐-巴罗克试剂槽-巴氏吸管-5ml样品瓶-SBS液氮冻存管-上海希言科学仪器有限公司 | 仿真茅草_人造茅草瓦价格_仿真茅草厂家_仿真茅草供应-深圳市科佰工贸有限公司 | 综合管廊模具_生态,阶梯护坡模具_检查井模具制造-致宏模具厂家 | 污水提升器,污水提升泵,污水提升装置-德国泽德(zehnder)水泵系统有限公司 | 步进_伺服_行星减速机,微型直流电机,大功率直流电机-淄博冠意传动机械 | 石家庄装修设计_室内家装设计_别墅装饰装修公司-石家庄金舍装饰官网 | 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | 全球化工设备网—化工设备,化工机械,制药设备,环保设备的专业网络市场。 | 散热器-电子散热器-型材散热器-电源散热片-镇江新区宏图电子散热片厂家 | 电梯装饰-北京万达中意电梯装饰有限公司 | 专业的压球机生产线及解决方案厂家-河南腾达机械厂 | 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | 建筑消防设施检测系统检测箱-电梯**检测仪器箱-北京宇成伟业科技有限责任公司 | 软文发布-新闻发布推广平台-代写文章-网络广告营销-自助发稿公司媒介星 | 大型低温冷却液循环泵-低温水槽冷阱「厂家品牌」京华仪器_京华仪器 | 坏男孩影院-提供最新电影_动漫_综艺_电视剧_迅雷免费电影最新观看 | 拉力机-万能试验机-材料拉伸试验机-电子拉力机-拉力试验机厂家-冲击试验机-苏州皖仪实验仪器有限公司 | 体视显微镜_荧光生物显微镜_显微镜报价-微仪光电生命科学显微镜有限公司 | 裹包机|裹膜机|缠膜机|绕膜机-上海晏陵智能设备有限公司 | 双齿辊破碎机-大型狼牙破碎机视频-对辊破碎机价格/型号图片-金联机械设备生产厂家 | 臭氧灭菌箱-油桶加热箱-原料桶加热融化烘箱-南京腾阳干燥设备厂 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】 | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | CE认证_FCC认证_CCC认证_MFI认证_UN38.3认证-微测检测 CNAS实验室 | 蜂窝块状沸石分子筛-吸附脱硫分子筛-萍乡市捷龙环保科技有限公司 | 辐射仪|辐射检测仪|辐射巡测仪|个人剂量报警仪|表面污染检测仪|辐射报警仪|辐射防护网 | 镀锌钢格栅_热镀锌格栅板_钢格栅板_热镀锌钢格板-安平县昊泽丝网制品有限公司 | 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | 上海橡胶接头_弹簧减震器_金属软接头厂家-上海淞江集团 |