美文网首页
记录封装好的axios

记录封装好的axios

作者: 糖醋里脊120625 | 来源:发表于2022-11-15 15:55 被阅读0次

拦截封装

import axios from "axios";
import {Notify, Toast} from 'vant';
import router from "../router";
export function request(config) {
    const instance = axios.create({
        // 设置请求头
        baseURL: 'https://api.shop.eduwork.cn',
        // 设置请求时间
        // timeout: 1000
    })

    // 请求拦截
    instance.interceptors.request.use(config => {
        // 如果有一些接口需要认证才可以访问,就在这统一设置
        const token = window.localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = 'Bearer' + token;
        }
        // 直接放行
        return config;
    },error => {

    })

    // 相应拦截
    instance.interceptors.response.use(res => {
        return res.data ? res.data : res;
    },error => {
        // 如果有需要授权才可以访问的接口,统一去login授权
        if (error.response.status == '401'){
            Toast.fail('请先登录');
            router.push({path:'/login'});
        }
        // 如果有错误,这里面去设置处理,显示错误信息
        Notify(error.response.data.errors[Object.keys(error.response.data.errors)[0]][0])
    })
    return instance(config);
}

路由封装

import { createRouter, createWebHistory } from 'vue-router'
import store from '../store';
import {Notify} from "vant";
const Home = () => import('views/home/Home');
const Category = () => import('views/category/Category');
const Detail = () => import('views/detail/Detail');
const Profile = () => import('views/profile/Profile');
const Shopcart = () => import('views/shopcart/Shopcart');
const Register = () => import('views/profile/Register');
const Login = () => import('views/profile/Login');
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '图书兄弟-首页'
    }
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      title: '图书兄弟-首页'
    }
  },
  
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
router.beforeEach((to,from,next) => {
  // 如果没有登陆,在这里到login
  if (to.meta.isAuthRequired && store.state.user.isLogin === false){
    Notify('您还没有登录,请登录先');
    return next('/login');
  }else {
    next();
  }
  document.title = to.meta.title;
})

export default router

相关文章

  • 记录封装好的axios

    拦截封装 路由封装

  • axios获取数据如何渲染到页面上和发送数据PHP

    用的是已经封装好的axios 下面是渲染 axios发送数据, 获取v-model的时候,要在前面加上this。

  • vue axios

    记录一下 搞忘了方便上来看看。import axios from 'axios'使用方式1 axios().the...

  • ajax简单封装

    工作之余简单封装了ajax的请求,但是工作中还是用jquery,axios,angular内部封装好了http模块...

  • 错误封装axios配置,导致响应出现叠加

    业务需求 公司有多个项目共同用到了已封装好的axios(funcation http()),基于去掉复制粘贴这种重...

  • axios

    最近通过 Vuejs 重构旅游页面项目使用到 axios 获取数据。对照官方文档,简要记录一些 axios 的使用...

  • 封装Axios与制定Service层

    封装Axios 在项目中我们通常使用的是axios,由于我们的项目采用的是typescript,以下记录怎么在ts...

  • axios请求---进阶用法

    上一篇文章里面大致记录了一下axios的基础用法这一篇文章主要记录axios的进阶用法:实例、配置、拦截器、取消请...

  • Axios相关记录

    Formdata请求配置

  • axios处理跨域问题

    首先npm安装好axios,其次在main.js中引入: 第二步就是修改上述所说的config>index.js配...

网友评论

      本文标题:记录封装好的axios

      本文链接:https://www.haomeiwen.com/subject/ptpdxdtx.html