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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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 stripos()函数及注意事项的分析
2013/06/08 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
各种快递查询--Api接口
2016/04/26 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python OS模块实例详解
2019/04/15 Python
Python文件操作方法详解
2020/02/09 Python
什么是Python变量作用域
2020/06/03 Python
Django如何批量创建Model
2020/09/01 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
秋季运动会稿件
2014/01/30 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
英语投诉信范文
2015/07/03 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技