在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器。

一、什么是导航守卫?

  vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。(在路由跳转时触发

  我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。

const router = new VueRouter({ ... })

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

  每个守卫方法接收三个参数:

  • to:  即将要进入的目标路由对象

  • from: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航

    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

  注意:一定要确保要调用 next 方法,否则钩子就不会被 resolved。

二、什么是axios拦截器?

  在请求或响应被 then 或 catch 处理前拦截它们,分为请求拦截器(发送请求前触发)和响应拦截器(得到响应结果后触发)。(在请求接口调用时触发

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

  注意:一定要有返回值

三、导航守卫和拦截器的使用

  • 用户登录成功后我们将后台返回的用户token信息存储至sessionStorage中

  

  • 路由跳转时使用导航守卫

   

  • 发送axios请求时使用拦截器

  

vue导航守卫和axios拦截器的区别的更多相关文章

  1. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  2. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  3. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  4. vue中怎样实现 路由拦截器

    vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...

  5. axios拦截器搭配token使用

    在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...

  6. Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

    Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...

  7. axios拦截器的使用方法

    很多时候我们需要在发送请求和响应数据的时候做一些页面处理,比如在请求服务器之前先判断以下用户是登录(通过token判断),或者设置请求头header,或者在请求到数据之前页面显示loading等等,还 ...

  8. 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +

    (1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...

  9. Axios拦截器配置

    Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 ...

随机推荐

  1. Codeforces Round #601 (Div. 2)E(寻找质因子,DP)

    先分解质因数,对于当前a[i],假设当前的质因数为x,这个位置要满足能被k整除,有两个可能,要么是它向后一个转移x%k个,要么是后一个向它转移k-x%k个. 对于每一个a[i]满足后,因为只会对下一个 ...

  2. B站上线互动视频背后,是一场谁都输不起的未来之战

    毋庸置疑的是,视频网站的竞争已愈发激烈.而它们的竞争体现在多个维度,比如买视频会员赠送购物网站会员.依靠各自的社交体系不断尝试打破圈层瓶颈等.当然,最直接的竞争还是体现在内容层面.购买独家版权.制作原 ...

  3. JavaScript和jQuery中的方法整理

    一.属性操作 // JavaScript: Dom.hasAttribute('attrName'); //是否有指定属性 Dom.hasAttributes(); //是否有属性 Dom.getAt ...

  4. 【笔记8-Redis分布式锁】从0开始 独立完成企业级Java电商网站开发(服务端)

    Redis分布式锁 Redis分布式锁命令 setnx当且仅当 key 不存在.若给定的 key 已经存在,则 setnx不做任何动作.setnx 是『set if not exists』(如果不存在 ...

  5. BeautifulReport底层框架的解析以及html报告页面元素的更改

    利用BeautifulReport 模块生成html报告 import BeautifulReport as br#引入包,之后设置一下别名 br = br.BeautifulReport(test_ ...

  6. Webflux是什么东东

    转自:百家号-薇薇心语 各位Javaer们,大家都在用SpringMVC吧?当我们不亦乐乎的用着SpringMVC框架的时候,Spring5.x又悄(da)无(zhang)声(qi)息(gu)的推出了 ...

  7. Linux 笔记:路径

    路径 pwd:查看当前路径 cd xxx:进入指定路径 路径中的一些特殊代表符号: .:当前路径 ..:上一级路径 -:上次访问的路径 /:根路径 ~:当前用户的主目录路径

  8. 获取class对象的三种方法以及通过Class对象获取某个类中变量,方法,访问成员

    public class ReflexAndClass { public static void main(String[] args) throws Exception { /** * 获取Clas ...

  9. C++11特性中基于范围的for循环

    本文摘录柳神笔记:   除了像C语⾔的for语句 for (i = 0; i < arr.size(); i++) 这样,C++11标准还为C++添加了⼀种新的 for 循环⽅ 式,叫做基于范围 ...

  10. 解决sublime不能安装packages的问题

    问题如下:该问题产生的原因是因为默认的配置中无法访问 "https://packagecontrol.io/channel_v3.json"该文件造成的 解决: 1.下载 chan ...