Vue/vant——未登陆时清空购物车以及拦截未登录的状态拒绝进入购物车页面

本文主要是介绍Vue/vant——未登陆时清空购物车以及拦截未登录的状态拒绝进入购物车页面，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

cart.js

    	// 清空购物车
      clearCart(state){
        state.list = [],
        state.selectAll = []
      }

axios.js

"use strict";
import Vue from "vue";
import axios from "axios";
import store from "@/store";
import router from "@/router";
import { Toast } from "vant";

axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";
/* 请求拦截器 */
axios.interceptors.request.use(
  (config) => {
    console.log(config);
    const token = store.state.user.token;
    config.headers.token = token;

    if (config.data != undefined) {
      if (config.headers.token == false && token) {
        Toast({
          message: "请登录",
          duration: 3000,
          forbidClick: true,
        });
        router.push("/login");
      }
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

/* 响应拦截器 */
axios.interceptors.response.use(
  (response) => {
    console.log(response);
    return response;
  },
  (error) => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          router.replace({
            name: "Login",
          });
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          Toast({
            message: "请求超时,请重新登录",
            duration: 3000,
            forbidClick: true,
          });
          window.sessionStorage.removeItem("token");
          store.commit("loginSuccess", null);
          setTimeout(() => {
            router.replace({
              name: "Login",
            });
          }, 2000);
          break;
        case 404:
          Toast({
            message: "无网络",
            duration: 3000,
            forbidClick: true,
          });
          break;
        default:
          Toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true,
          });
      }
    }
    return Promise.reject(error);
  }
);
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: {
          params,
        },
      })
      .then((res) => {
        resolve(res.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, QS.stringify(params))
      .then((res) => {
        resolve(res.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

main.js（引入封装好的以及全局的axios）

import {get,post} from './plugins/axios'
axios.defaults.baseURL = "/api";
 Vue.prototype.$post= post
Vue.prototype.$get= get
Vue.prototype.$axios =axios 

Detail.vue页面（详情页）

 在cart.js的vuex中异步请求接口数据

  actions: {
    doselectAll({ getters, commit }) {
      // 传getters中的状态，如果全选按钮是开启的那么就返回全不选，否则就在跳回全选
      getters.checkedAll ? commit("noselectAll") : commit("selectAll");
    },
    updateCartList(){
      Axios({
        url:'/cart',
        data:{},
        method:"get",
        headers:{
          token:true
        }
      }).then(v=>{
        console.log(v);
      })
    }
  },

在购物车页面Cart.vue中用状态接收请求

 记得把user状态传过来

这样写的好处是无需请求数据即可判断是否为登录状态，如果是请求数据后在判断，则会出现404请求失败的提示 

 下面为效果展示：

这篇关于Vue/vant——未登陆时清空购物车以及拦截未登录的状态拒绝进入购物车页面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！