vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)


Posted in Javascript onOctober 24, 2018

一、路由拦截

登录拦截逻辑

第一步:路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,

否则就进入登录页面。

const routes = [
  {
    path: '/',
    name: '/',
    component: Index
  },
  {
    path: '/repository',
    name: 'repository',
    meta: {
      requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
    },
    component: Repository
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
];

定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (store.state.token) { // 通过vuex state获取当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
})

每个钩子方法接收三个参数:

* to: Route: 即将要进入的目标 路由对象
* from: Route: 当前导航正要离开的路由
* next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
* next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
* next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
* next(‘/') 或者 next({ path: ‘/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用 next 方法,否则钩子就不会被 resolved。

完整的方法见/src/router.js

其中,to.meta中是我们自定义的数据,其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话,同时当前应用不存在token,则跳转到登录页面,进行登录。登录成功后跳转到目标路由。

登录拦截到这里就结束了吗?并没有。这种方式只是简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。还有一种情况便是:当前token失效了,但是token依然保存在本地。这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。

这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

第二步:拦截器

要想统一处理所有http请求和响应,就得用上 axios 的拦截器。通过配置http response inteceptor,当后端接口返回401 Unauthorized(未授权),让用户重新登录。

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (store.state.token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
      config.headers.Authorization = `token ${store.state.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳转到登录页面
          store.commit(types.LOGOUT);
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
          })
      }
    }
    return Promise.reject(error.response.data)  // 返回接口返回的错误信息
  });

二、http拦截

拦截器

首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多.

这个项目我引入了element ui框架,所以我是结合element中loading和message组件来处理的.我们可以单独建立一个http的js文件处理axios,再到main.js中引入.

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
 // element ui Loading方法
 loadinginstace = Loading.service({ fullscreen: true })
 return config
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载超时'
 })
 return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
 loadinginstace.close()
 return data
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载失败'
 })
 return Promise.reject(error)
})
export default axios

这样我们就统一处理了http请求和响应的拦截.当然我们可以根据具体的业务要求更改拦截中的处理.

vue2+element更全面,更简单深入的例子 请查看:https://github.com/guo11111/vue2-demo

总结

以上所述是小编给大家介绍的vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 #Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 #Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 #Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 #Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 #Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 #Javascript
vue中的router-view组件的使用教程
Oct 23 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
浅谈php冒泡排序
2014/12/30 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php实现中文转数字
2016/02/18 PHP
php中this关键字用法分析
2016/12/07 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
XML的代替者----JSON
2007/07/21 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
django ajax json的实例代码
2018/05/29 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
详解Python3 基本数据类型
2019/04/19 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python实现最速下降法
2020/03/24 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
幼儿园开学寄语
2014/04/03 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2015年班组长工作总结
2015/04/10 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS