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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
javascript实现密码强度显示
Mar 18 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
php 分页原理详解
2009/08/21 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
yepnope.js使用详解及示例分享
2014/06/23 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Scrapy的简单使用教程
2017/10/24 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
关键字throw与throws的用法差异
2016/11/22 面试题
测试工程师岗位职责
2013/11/28 职场文书
员工薪酬福利制度
2014/01/17 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
迎新晚会邀请函
2014/02/01 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
信息技术教学反思
2014/02/12 职场文书
食品安全承诺书
2014/05/22 职场文书
房产分割协议书范文
2014/11/21 职场文书
初中美术教学反思
2016/02/17 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL