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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
vue axios整合使用全攻略
May 24 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
JS canvas实现画板和签字板功能
Feb 23 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
php下使用iconv需要注意的问题
2010/11/20 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Python输出9*9乘法表的方法
2015/05/25 Python
python开头的coding设置方法
2019/08/08 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python处理document文档保留原样式
2019/09/23 Python
python-视频分帧&多帧合成视频实例
2019/12/10 Python
python实现交并比IOU教程
2020/04/16 Python
深入分析python 排序
2020/08/24 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
门卫岗位职责
2013/11/15 职场文书
2014年工人工作总结
2014/11/25 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
乐山大佛导游词
2015/02/02 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server