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 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
jQuery动画与特效详解
Feb 01 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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
如何删除多级目录
2006/10/09 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python实现自动登录
2018/09/17 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
如何写好自荐信
2014/04/07 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python