train_vue/src/App.vue

<template>
  <div id="app">
    <el-menu
      :default-active="$route.name"
      background-color="#545c64"
      text-color="#fff"
      mode="horizontal"
      class="el-menu-demo nav"
      active-text-color="#ffd04b"
      @select="menuSelect"
    >
      <template v-for="(item, index) in getterPermission.routes">
        <!-- 把:id给截掉 -->
        <!-- :index="item.path.split(':')[0]" -->
        <el-menu-item
          :index="item.name"
          v-if="!item.hasOwnProperty('children')"
          :key="index"
        >{{item.alias}}</el-menu-item>
        <el-submenu :index="$route.path" v-else :key="index">
          <template slot="title">{{item.alias}}</template>
          <!-- :index="item.path+'/'+child.path.split(':')[0]" -->
          <el-menu-item
            v-for="(child,index_child) in item.children"
            :key="index_child"
            :index="child.name"
          >{{child.alias}}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>

    <router-view />

    <hr />

    <div class="buttons">
      <!-- :disabled="!isLogin" -->
      <el-button type="primary" @click="dialogVisible=true" :disabled="!isLogin">登陆</el-button>
      <el-button type="primary" @click="logout">登出</el-button>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="登陆" class="dialog">
      <el-row :gutter="20">
        <el-col :span="4">账号：</el-col>
        <el-col :span="20">
          <el-input v-model="user.username"></el-input>
        </el-col>
        <el-col :span="4">密码：</el-col>
        <el-col :span="20">
          <el-input type="password" v-model="user.password"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-button class="button" type="primary" @click="login">登陆</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import router from "./router";
import { login, logout } from "@/Api/user";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      // routers: this.$router.options.routes,
      routers: this.getterPermission ? this.getterPermission.routes : [],
      dialogVisible: false,
      user: {
        username: "",
        password: ""
      }
    };
  },
  computed: {
    isLogin() {
      console.log("csrftoken", this.$Cookie.get("csrftoken"));
      return this.$Cookie.get("csrftoken") === undefined;
    },
    ...mapGetters(["getterPermission"])
  },
  created() {
    //加载异步路由
    let asyncRouters = [
      {
        path: "/asyncFood",
        name: "asyncFood",
        alias: "异步菜场",
        component: () => import("@/views/food/food.vue")
      }
    ];
    this.asyncAddRouters(asyncRouters);
  },
  methods: {
    login() {
      console.log("login");
      console.log(document.cookie);
      login(this.user)
        .then(res => {
          console.log(res);
          this.$nextTick(() => {
            if (document.cookie !== "") {
              console.log("刷新界面");
              location.reload();
              this.dialogVisible = false;
              this.isLogin = true;
            } else {
              this.isLogin = false;
            }
          });
        })
        .catch(e => {
          this.$message({
            type: "error",
            message: e
          });
          console.log(e);
        });
    },
    logout() {
      logout().then(res => {
        this.$Cookie.remove("csrftoken");
        console.log(document.cookie);
        console.log(res);
      });
      this.$Cookie.remove("csrftoken");
      console.log("登出");
    },
    //选择菜单
    menuSelect(index, indexPath) {
      // console.log(indexPath);
      let pathName = indexPath[indexPath.length - 1];
      // console.log(this.$route.name, pathName);
      if (this.$route.name !== pathName) {
        this.$router.push({
          name: indexPath[indexPath.length - 1]
        });
      }
    },
    ...mapActions(["asyncAddRouters"])
  }
};
</script>

<style lang="less">
body,
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  // color: #2c3e50;
  // margin-top: 60px;
  padding: 0px;
  margin: 0px;
}
.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: 5%;
  // top: 3%;
  bottom: 5%;
  .el-button {
    margin-bottom: 5px;
    margin-left: 0px !important;
    width: 100px;
  }
}
.dialog {
  .el-row {
    margin-bottom: 5px;
  }
  .el-col {
    text-align: right;
    line-height: 40px;
  }
  .el-button {
    float: right;
  }
}
</style>