封装axios请求

ColorWhiteDeveloper

2022-09-19 2ae9ff51984ab305f81e8e7e24829ac3093c6af1

封装axios请求

 src/main.js

@@ -12,16 +12,7 @@
import './assets/icons' 
// 引入全局样式
import '@/styles/index.scss' 
import api from "axios"
api.interceptors.request.use((config)=>{
  console.log(config);
  const token = localStorage.getItem('token');
  const tokenHead = localStorage.getItem('tokenHead');
    if(token){
      config.headers.Authorization = tokenHead+token;
    }
  return config;
})
import api from "./utils/request"
Vue.prototype.$axios=api
console.log(process.env.VUE_APP_BASE_API);
Vue.use(ElementUI)

 src/router/index.js

@@ -18,14 +18,9 @@
        component: () => import('@/views/systemSetting'),
        children: [
          {
            path: "createUser",
            name: "createUser",
            component: () => import('@/views/systemSetting/baseSetting/user/createUser')
          },
          {
            path: 'userList',
            name: 'userList',
            component: () => import('@/views/systemSetting/baseSetting/user/userList')
            path: "user",
            name: "user",
            component: () => import('@/views/systemSetting/baseSetting/user')
          },
          {
            path:'role',
@@ -41,6 +36,16 @@
            path:'department',
            name:'department',
            component: () => import('@/views/systemSetting/baseSetting/department')
          },
          {
            path:'portalSetting',
            name:'portalSetting',
            component: () => import('@/views/systemSetting/platform/portalSetting')
          },
          {
            path:'otherInterface',
            name:'otherInterface',
            component: () => import('@/views/systemSetting/platform/otherInterface')
          }
        ]
      },

 src/utils/request.js

@@ -1,25 +1,19 @@
import axios from 'axios';
const service = axios.create({
const api = axios.create({
    baseURL: 'http://42.193.1.25:8082/', // 请求的公共地址部分
})
// 拦截器
// 请求
service.interceptors.request.use(
  // 请求之前的回调函数
  function (config) {
    const token = localStorage.getItem('token');
    if(token){
      config.headers.authentication = token;
api.interceptors.request.use((config)=>{
  const token = localStorage.getItem('token');
  const tokenHead = localStorage.getItem('tokenHead');
    if(token && tokenHead){
      config.headers.Authorization = tokenHead+token;
    }
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
  return config;
})
// 响应
service.interceptors.response.use(
api.interceptors.response.use(
  function (response) {
    return response.data;
  },
@@ -27,4 +21,4 @@
    return Promise.reject(error);
  }
);  
export default service;
export default api;

 src/views/layout/components/AsideBar/index.vue

@@ -27,10 +27,7 @@
            {
              name: "基础设置", index: '/home/system/base', children: [
                {
                  name: '用户管理', index: '/home/system/userList',
                },
                {
                  name: '新增用户', index: '/home/system/createUser',
                  name: '用户管理', index: '/home/system/user',
                },
                {
                  name:'角色管理', index:'/home/system/role',
@@ -43,7 +40,14 @@
                }
              ]
            },
            { name: "平台设置", index: "/home/system/plateform", children: [] },
            { name: "平台设置", index: "/home/system/plateform", children: [
              {
                name:'门户设置',index:'/home/system/portalSetting'
              },
              {
                name:'第三方接口管理',index:'/home/system/otherInterface'
              }
            ] },
          ],
        }
      ],
@@ -65,11 +69,9 @@
      this.asideList = null;
      menu.forEach(item => {
        if (path.indexOf(item.name) !== -1) {
          console.log(item.children);
          that.asideList = item.children;
        }
      })
      console.log(this.asideList);
    },
    Jump(path) {
      this.$router.push(path);

 src/views/layout/components/Main/index.vue

@@ -26,7 +26,7 @@
  padding: 0;
  .content {
    background-color: #f0f2f5;
    padding: 20px 40px;
    padding: 11px;
  }
}
</style>

 src/views/login/index.vue

@@ -107,17 +107,17 @@
      const { username, password } = this.loginForm;
      const that = this;
      this.$axios
        .post("http://42.193.1.25:8082/sccg/admin/login", {
        .post("sccg/admin/login", {
          password,
          username,
        })
        .then(function (response) {
          if (response.data.code === 200) {
          if (response.code === 200) {
            // 保存token
            console.log(response);
            localStorage.setItem('token',response.data.data.token);
            localStorage.setItem('token',response.data.token);
            // 保存token
            localStorage.setItem('tokenHead',response.data.data.tokenHead)
            localStorage.setItem('tokenHead',response.data.tokenHead)
            // 跳转到首页
            that.$router.push("/home");
          }else{

 src/views/systemSetting/baseSetting/user/createUser/index.vue

@@ -269,7 +269,7 @@
        }
    },
    created() { 
        this.$axios.get("http://42.193.1.25:8082/sccg/role/listAll").then(res=>{
        this.$axios.get("sccg/role/listAll").then(res=>{
            console.log(res);
        });
    },

 src/views/systemSetting/baseSetting/user/index.vue

File was renamed from src/views/systemSetting/baseSetting/user/userList/index.vue
@@ -8,7 +8,10 @@
                    <el-input placeholder="请输入内容"></el-input>
                </div>
                <div class="addUser">
                    <el-button type="primary">添加用户</el-button>
                    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
                    <el-dialog :visible.sync="dialogVisible" width="45%">
                        <createUser />
                    </el-dialog>
                </div>
            </div>
        </header>
@@ -45,8 +48,13 @@
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" width="246">
                        <template slot-scope="scope">
                            <el-button size="mini">编辑</el-button>
                            <el-button size="mini" type="danger">删除</el-button>
                            <div class="operation">
                                <span>修改角色</span>
                                <span>查看</span>
                                <span>修改密码</span>
                                <span>删除</span>
                                <span>修改部门</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
@@ -55,7 +63,11 @@
    </div>
</template>
<script>
import createUser from "./createUser"
export default {
   components:{
    createUser
   },
    data() {
        return {
            tableData: [
@@ -66,9 +78,18 @@
                    role: '超级管理员',
                    is_open: true,
                }
            ]
            ],
            dialogVisible:false,
        }
    },
    created(){
        // 获取当前用户登录信息
        this.$axios.get(
            'sccg/admin/info'
        ).then(res=>{
            console.log(res);
        })
    }
}
</script>
<style lang="scss" scoped>
@@ -112,12 +133,23 @@
        background-color: #fff;
        margin-top: 20px;
        padding: 0 10px;

        padding-bottom: 50px;
        .mainTitle {
            line-height: 60px;
        }
        .el-table{

        .el-table {
            font-size: 10px;

            .operation {
                display: flex;
                justify-content: space-around;
                color: #0079fe;

                span:hover {
                    cursor: pointer;
                }
            }
        }
    }
}

 src/views/systemSetting/platform/otherInterface/index.vue

New file
@@ -0,0 +1,5 @@
<template>
    <div>
        
    </div>
</template>

 src/views/systemSetting/platform/portalSetting/index.vue

New file
@@ -0,0 +1,5 @@
<template>
    <div>
        
    </div>
</template>