Vue 前端实现登陆拦截及axios 拦截器的使用


Posted in Javascript onJuly 17, 2019

该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。

准备

你需要先生成自己的 Github Personal Token( 生成Token )。 Token 生成后 访问 Demo,即可查看你的Repository List。

项目结构

├── README.md
├── dist // 打包构建后的文件夹
│ ├── build.js
│ └── build.js.map
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── css.css
│ │ ├── icon.css
│ │ └── logo.png
│ ├── constant
│ │ └── api.js // 配置api接口文件
│ ├── http.js // 封装fetch、post请求及http 拦截器配置文件
│ ├── index.vue
│ ├── login.vue
│ ├── main.js
│ ├── repository.vue
│ ├── router.js // 路由配置文件
│ └── store
│  ├── store.js 
│  └── types.js // vuex types
└── webpack.config.js

技术栈

  • Vue 2.0
  • vue-router
  • vuex
  • axios
  • vue-material

登录拦截逻辑

第一步:路由拦截

首先在定义路由的时候就需要多添加一个自定义字段 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) // 返回接口返回的错误信息
 });

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

通过上面这两步,就可以在前端实现登录拦截了。 登出 功能也就很简单,只需要把当前token清除,再跳转到首页即可。

如果想实现登陆完成之后调回到之前想要进的页面 只需在登陆页的跳转处添加如下判断

if(!!this.$route.query.redirect){
  this.$router.push(this.$route.query.redirect)//这里是拦截前想跳转的页面
 }else{
  this.$router.push('/home')//这里填你默认跳转的地址
  }

ps:下面看下vue的axios拦截器使用

axios拦截器

下载并使用axios后可以对全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。

下面是一个为axios添加请求loading的例子:

添加请求拦截器

//定义一个请求拦截器
axios.interceptors.request.use(function(config){
 Vue.$vux.loading.show(); //在请求发出之前进行一些操作
 return config
},function (error) {
 // 对请求错误做些什么
 // return Promise.reject(error)
});

添加响应拦截器

//定义一个响应拦截器
axios.interceptors.response.use(function(config){
 Vue.$vux.loading.hide();;//在这里对返回的数据进行处理
 return config
},function (error) {
 // 对请求错误做些什么
 // return Promise.reject(error)
});

移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

某一个函数不希望受到全局拦截器的影响

解决方法:在函数内从新添加一个拦截器

如下:为请求函数添加一个新的拦截器使之不受全局拦截器影响

const $ajax = this.$http.create()

例:下面函数不受全局拦截器影响

pollopenid(){
  const $ajax = this.$http.create()
  $ajax({
  method:'post',
  url:'',
  data:{
   
  }
  }).then(res=>{
  
  })
 }

总结

以上所述是小编给大家介绍的Vue 前端实现登陆拦截及axios 拦截器的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 #Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 #Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 #Javascript
js getBoundingClientRect使用方法详解
Jul 17 #Javascript
深入了解Hybrid App技术的相关知识
Jul 17 #Javascript
Vue发布项目实例讲解
Jul 17 #Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 #Javascript
You might like
教你如何把一篇文章按要求分段
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
php实现求相对时间函数
2015/06/15 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
九年级物理教学反思
2014/01/29 职场文书
致400米运动员广播稿
2014/02/07 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
讲文明倡议书
2015/04/29 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL