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控制的遮罩层实例介绍
May 29 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
全面了解js中的script标签
Jul 04 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
微信小程序删除处理详解
Aug 16 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
实用函数4
2007/11/08 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php 使用array函数实现分页
2015/02/13 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
php的socket编程详解
2016/11/20 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
js分页工具实例
2015/01/28 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
超简单的Python HTTP服务
2019/07/22 Python
用python写测试数据文件过程解析
2019/09/25 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
岗位职责风险点
2014/03/12 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
迟到检讨书
2015/01/26 职场文书
中秋节感想
2015/08/10 职场文书
《赵州桥》教学反思
2016/02/17 职场文书