Vue/vant——用axios获取header头中的token值以及权限的配置

目录

vant 使用axios请求头部的写法

拦截注册无法进入购物车

axios封装

---

vant 使用axios请求头部的写法

可以参考一下官方文档Axios

 把vuex中的token：false值给取出来

          this.$axios({
            url: "/logout",
            method: "post",
            date: {},
            headers: {
              token: this.token,
            },
          }).then((v) => {
            console.log(v);
          });

---

首先还是要对加入购物车添加点击事件， 

 

      let shop_id =
        this.detail.sku_type === 0
          ? this.detail.id
          : this.detail.goodsSkus[this.checkgoodsSkusIndex].id;
          console.log(shop_id);
      // 这个skus_type就是请求数据中的单规格与多规格
      let skus_type = this.detail.sku_type;
       console.log(skus_type);
      // num商品数量
      let num = this.value;

 这里的value就是商品联动的数量

拦截注册无法进入购物车

    toCart() {
      var user = window.sessionStorage.getItem("token");
      if (user) {
        user = JSON.parse(user);
      }
      var shop_id =
        this.detail.sku_type === 0
          ? this.detail.id
          : this.detail.goodsSkus[this.checkgoodsSkusIndex].id;
      console.log(shop_id);
      // 这个skus_type就是请求数据中的单规格与多规格
      var skus_type = this.detail.sku_type;
      console.log(skus_type);

      // num商品数量
      var num = this.value;
      console.log(num);
      // console.log(require);
     this.$axios({
        url: `/cart`,
        method: "POST",
        data: {
          shop_id: shop_id,
          skus_type: skus_type,
          num: num,
        },
        headers: {
          token: user,
        },
      }).then((v) => {
        console.log(v);
        console.log(v.config);
          Toast("添加成功，正在前往购物车页面......");
         return setTimeout(() => {
            this.$router.push("/cart");
          }, 1000);
      });
    },

      this.$axios({
        url: `/cart`,
        method: "POST",
        data: {
          shop_id: shop_id,
          skus_type: skus_type,
          num: num,
        },
        headers: {
          token: user,
        },
      }).then((v) => {
        console.log(v);
        console.log(v.config);
          Toast("添加成功，正在前往购物车页面......");
         return setTimeout(() => {
            this.$router.push("/cart");
          }, 1000);
      });

axios.js

这里没有封装，可以直接触发axios状态，就导致页面刷新时就执行拦截，所以就判断data中有没有数据即可，如果没有那么就不执行，有的话就给token值替换掉并且跳转路由即可 

引入

import $store from "../store/index";
import Vue from "vue";
import axios from "axios";
import router from "../router/index";
import { Toast } from "vant";

 axios.js拦截部分

const _axios = axios.create(config);
_axios.interceptors.request.use(
  (config) => {
    // Do something before request is sentz
    console.log(config);
    if (config.data != undefined) {
      const token =$store.state.user.token
      config.headers.token= token;
      if (config.headers.token == false && token) {
        setTimeout(() => {
          router.push('login')
        }, 1000);
         Toast('请先登录！')
      }
    }
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

这里也有一种封装形式可以参考一下

axios封装

/**axios封装
  * 请求拦截、相应拦截、错误统一处理
  */
import axios from 'axios';
import QS from 'qs';
import { Toast } from 'vant';
/*import store from '../store/index'*/

// 环境的切换
axios.defaults.baseURL = 'http://152.136.185.210:8000/api/w6';
// 请求超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
 axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token = store.state.token;
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    })

// 响应拦截器
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。
                case 401:
                    router.replace({
                        path: '/login',
                        query: { redirect: router.currentRoute.fullPath }
                    });
                    break;
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面
                case 403:
                    Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                // 404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                break;
                // 其他错误，直接抛出错误提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
);
/**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function get(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, {
            params: params
        })
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}
/**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}