vue真实企业实战分享（上）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requireAuth: true
    },
    children: [
      // 学生数据
      {
        path: '/home/studentData',
        name: 'studentData',
        meta: {
          requireAuth: true
        },
        component: () => import('../views/studentData/studentData.vue')
      },
      // 老师数据
      {
        path: '/home/teacherData',
        name: 'teacherData',
        meta: {
          requireAuth: true
        },
        component: () => import('../views/teacherData/teacherData.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/login.vue'),
    // 子路由
    children: [
    ]
  }
]
// 多次点击同一个导航时会报错，所以添加了这段代码
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
  routes
})
// 别的地方会用到 router，所以将它导出去
export default router

<template>
  <div class="login-box">
    <div class="form-con">
      <h2>Vue+element ui 管理系统实战</h2>
      <div class="label">
        <el-input placeholder="请输入账号" v-model="userName">
          <template slot="prepend"><i class="el-icon-user"></i></template>
        </el-input>
      </div>
      <div class="label">
        <el-input placeholder="请输入密码" v-model="password" show-password @keyup.enter.native="loginFn()">
          <template slot="prepend"><i class="el-icon-lock"></i></template>
        </el-input>
      </div>
      <div class="label">
        <el-button class="login-btn" type="primary" @click="loginFn()"
          >登 录</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      userName: "",
      password: "",
      verify: "",
    };
  },
};
</script>
<style lang="scss" scope>
.login-box {
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  background: url("~@/assets/4.jpg") no-repeat;
  background-size: 100% 100%;
  .form-con {
    h2 {
      color: #ffffff;
      // color: $colorRed;
    }
    width: 360px;
    height: 420px;
    margin: 150px auto auto auto;
    .label {
      margin: 40px 0;
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>

import axios from 'axios'
import vue from '../main.js'
// 从本地获取token
function getTokenByLocal() {
    let token = sessionStorage.getItem('token');
    return token;
}
const service = axios.create({
    baseURL: '/sys',
    // withCredentials: true,
    timeout: 5000,
})
// 请求拦截
service.interceptors.request.use(
    config => {
        if (getTokenByLocal()) {
            // 在此可以设置所有接口headers头部
            config.headers['token'] = getTokenByLocal();
        }else{
            // window.location.href="/login";
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)
// 响应拦截
service.interceptors.response.use(
    response => {
        let res = response.data;
        // console.log(res);
        // 状态码处理
        if (res.code == '200') {
            // location.href = "home/login";
        }
        // 如果为 -101 代表用户未登录
        if(res.code == '-101'){
            vue.$router.push('/login');
        }   
        return Promise.resolve(res);
    },
    error => {
        return Promise.reject(error)
    }
)
export default service;

// 将service.js引入进来
import service from './service.js'
// post请求 80% 耦合度低 复用性高
export function requestOfPost(url, data){
    return service.post(url, data);
}

import {requestOfPost} from './common.js'
export function postRequest(url, data){
    return new Promise((resolve, reject) => {
        requestOfPost(url, data).then(res => resolve(res))
        .catch(error => reject(error))
    })
}

const url = {
    // 登录
    login: '/login',
    // 学生列表
    getClassmates: '/getClassmates' 
}
export  default url;

module.exports = {
    devServer: {
        compress: false,
        open: true,
        proxy: {
            '/sys': {
                // 代理地址
                target: 'http://api.gebilaowang.com',
                // websocket (一般用于即时通讯，游戏，这里不需要，所以不开)
                ws: false, 
                // 是否允许跨域
                changeOrigin: true,
                // 重写
                pathRewite: {
                    '/sys': '/'
                }
            }
        }
    }
}