vue.js添加拦截器，实现token认证（使用axios）

什么是token？

token是一个用户自定义的任意字符串，目前开发中，token都是在服务端生成而且token的值会保存到服务器后台。只有服务器和客户端知道这个字符串，因而，这个token就成了二者之间的秘钥，它可让服务器确认请求是来自客户端仍是恶意的第三方。

为何使用token？

简单地说，token的使用就是为了数据安全，前台是经过接口路径（URL）的调用来获取数据的，若是恶意的第三方知道了某一个接口路径，那么，他即可以直接经过接口路径在网页上直接获取该接口的全部数据信息。若是添加了token，相似于这种恶意的行为便不会产生。token是在用户登陆的时候产生的，在前台登陆某一个系统而且得到一个token以后，前台须要将该token设置在请求头上，以确保以后的每一次请求都是带着该“令牌“的，固然后台的接口请求也设置了该请求头。（若是对后台生成token，而且对该token的设置以及存储感兴趣的话，请关注下一篇文章~~~）

基于token验证的流程

• 客户端使用用户名跟密码请求登陆
• 服务端收到请求，去验证用户名和密码（后台根据请求去数据库查找是否有该用户）
• 验证成功后，服务端会签发一个token（该token值通常都会存入Redis数据库中，并设置过时时间），再把这个token发送给客户端
• 客户端收到token以后，通常存储在localStorage（HTML5新特性，只要不手动删除存储的内容，存储的信息会一直存在）中
• 客户端每次向服务端请求资源的时候须要带着服务端签发的token
• 服务端收到请求，而后去验证客户端请求里面带着的token（token是否为该用户的令牌以及token是否有效等），若是验证成功，就向客户端返回请求的数据

什么是axios？

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中。

官方网址：www.axios.com/

中文文档：www.kancloud.cn/yunye/axios…

vue实现axios拦截，token验证

在简单介绍完这些基础知识以及用到的插件以后，咱们便要开始今天的主题--token验证。

首先在vue.js 中下载axios，npm install axios,在main.js文件中全局使用：

import axios from 'axios';
Vue.prototype.$http = axios;
复制代码

这样引入以后，在其余的文件中即可以使用$http来调用接口：

getRoomDetail() {
        this.$http.get(this.roomDetailApi).then(
          res => {
            this.roomDetail = res.data.data;
          },
          err => {
            console.log("接受数据错误" + err);
          }
        ).catch(err => {
          console.log("服务器错误" + err);
        })
      }
复制代码

以上步骤只是简单的实现了先后台的交互（在前台调用后台接口来获取数据），接下来咱们便要进一步学习，实现token的验证。

根据上面的介绍，咱们在成功登陆后台并拿到返回给的token以后，须要使用localStorage全局存储，实现代码以下：

// 用户登陆
      login() {
        this.postData = {
          account: this.userInfo.account,
          password: this.$md5(this.userInfo.password),
        };
        this.$http.post(configIp.apiConfig.user.login, this.postData)
          .then(res => {
            if (res.data.errno === 0) {
              this.$Message.success('登录成功');
              this.$router.push('roomInfo');
              //全局存储token
              window.localStorage["token"] = JSON.stringify(res.data.data.token);
            } else {
              this.$Message.error('登陆失败');
              this.forgetPassword = true;
            }
          }).catch(err => {
          console.log("登陆失败");
        })
      },
复制代码

接下来，咱们要作的就是设置请求头，在以后的接口请求过程当中，都要经过token的认证来获取数据，添加 http.js 文件（拦截器）

import axios from 'axios';
import router from './router';

// axios 配置
axios.defaults.timeout = 8000;
axios.defaults.baseURL = 'https://api.github.com';

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.token) { //判断token是否存在
      config.headers.Authorization = localStorage.token;  //将token设置成请求头
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.errno === 999) {
      router.replace('/');
      console.log("token过时");
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);
export default axios;
复制代码

添加拦截器以后，修改 main.js文件： 将上面

import axios from 'axios';
Vue.prototype.$http = axios;
复制代码

改成：

import http from './http';  //此处问http文件的路径
Vue.prototype.$http = http;
复制代码

完成该步骤以后，基本的操做已经实现了，下面让咱们查看一下是否已经添加请求头：

以上操做实现了添加请求头token，在以后的请求中，会自动添加该请求头，可是不是每个页面都须要登陆权限（后台会实现不须要进行token验证的筛选），那么前台也须要经过路由的meta标签对须要作校验的路由页面进行标记，其余页面则不须要验证，代码以下:

{
  path: '/userInfo',
  name: 'userInfo',
  meta: {
    requireAuth: true,  // 该路由项须要权限校验
  }
  component: userInfo
}, {
  path: '/userList',
  name: 'userList',    // 该路由项不须要权限校验    
  component: userInfo
}
复制代码

以后，咱们能够定义一个路由防卫，每次路由跳转，咱们都来作一下权限校验，参考代码以下：

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {  // 判断该路由是否须要登陆权限
    if (localStorage.token) {  // 获取当前的token是否存在
      console.log("token存在");
      next();
    } else {
      console.log("token不存在");
      next({
        path: '/login', // 将跳转的路由path做为参数，登陆成功后跳转到该路由
        query: {redirect: to.fullPath}
      })
    }
  }
  else { // 若是不须要权限校验，直接进入路由界面
    next();
  }
});
复制代码

到此，用vue.js实现前台添加请求头，经过axios设置拦截器添加token就已经实现了。

若是对node.js实现生成token，处理token等操做感兴趣，但愿关注下一篇文章~~~~~