vue+axios实现登录拦截的实例代码


Posted in Javascript onMay 22, 2017

一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。

前言

该项目是利用了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

技术栈

  1. Vue 2.0
  2. vue-router
  3. vuex
  4. axios
  5. 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();
  }
})

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

  1. to: Route: 即将要进入的目标 路由对象
  2. from: Route: 当前导航正要离开的路由
  3. next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    1. next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    2. next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    3. 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清除,再跳转到首页即可。

关于axios

对于axios,很多刚开始学习vue的人都觉得文档比较难以看懂。我刚开始也是这么觉得的。但通过这么一个项目下来后,发现axios并不难理解。建议在学习axios的时带着下面的目的去看文档会更高效。因为掌握了下面这些内容,基本上就可以无障碍得在项目中使用axios了。

  1. 发起http请求的方法
  2. http 请求成功时返回的数据及其类型
  3. http请求失败的处理
  4. 拦截器的使用
  5. http的配置

axios文档

运行及构建

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 #Javascript
bootstrap模态框远程示例代码分享
May 22 #Javascript
bootstrap手风琴折叠示例代码分享
May 22 #Javascript
移动端手指放大缩小插件与js源码
May 22 #Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
详解Angular路由 ng-route和ui-router的区别
May 22 #Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 #Javascript
You might like
10条PHP高级技巧[修正版]
2011/08/02 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
python的几种开发工具介绍
2007/03/07 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python 决策树算法的实现
2020/10/09 Python
pycharm实现猜数游戏
2020/12/07 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
社区居务公开实施方案
2014/03/27 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2014年实验室工作总结
2014/12/03 职场文书
拾金不昧表扬信
2015/01/16 职场文书
土地租赁协议书
2015/01/29 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
盗窃案辩护词
2015/05/21 职场文书
文艺演出主持词
2015/07/01 职场文书
安全温馨提示语大全
2015/07/14 职场文书