Vue-后台管理项目001---侧边栏

从浏览器上可以看出，他的返回值是promise(pending)，所以我们可以用async，await来简化这个操作
await只能用在被async修饰的方法中，需要把仅挨着await的方法修饰成async
需要把仅挨着await的方法修饰成异步的async

现在可以将这个data属性，解构赋值出来给res

将这个真实的服务返回的数据赋值给res

弹框提示

把弹框组件挂载到Vue的原型组件上，每一个组件都可以通过this.$message来访问到Message组件
$message是一个自定义属性,随便起名,后面的Message是一个组件

登录成功之后的行为

1.将登录成功之后的token,保存到客户端的sessionStorage中

	1.1项目中出了登录之外的其他API接口，必须在登录之后才能访问
	1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中

2.通过编程式导航跳转到后台主页，路由地址是/home

通过路由导航控制访问权限

现在访问home页面需要登录的状态才可以
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

退出

基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token,必须重新登录生成一个新的token之后才可以访问页面。

处理语法警告问题

优化element–ui按需组件的导入形式

主页布局

element UI 中提供的主键名称就是类名，在调样式的时候，可以直接使用

<template>
  <el-container class="home-container">

    <el-header>Header
      <el-button type="info" @click="logout">退出el-button>
    el-header>

    <el-container>

      <el-aside width="200px">Asideel-aside>

      <el-main>Mainel-main>
    el-container>
  el-container>
template>

<script>
export default {
  methods: {
    logout () {
      // 清空token
      window.sessionStorage.clear()
      // 跳转到login
      this.$router.push('/login')
    }
  }
}
script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #EAEDF1;
}
style>

如上效果

主页header区域布局

左侧菜单布局

调一下颜色和背景色一样，在将复制过来的1234各种样例的一级菜单删掉，后面用的话，复制第一个就行

通过接口获取菜单数据

通过axios请求拦截器添加token,保证拥有获取数据的权限。

就是一个预处理的过程，会把发送到服务端的请求，先预处理一下，加上token，再去访问服务端

发起请求获取左侧菜单数据

现在一级菜单就完成了
一共两次for循环，一二级菜单就出来了

左侧菜单格式美化

一级菜单的图标只能使用第三方的图标库
但是现在图标的数据都是for循环得到的数据，那怎么把这个图标的样式放在这个图标里面呢
可以再data里面定义一个数组

左侧菜单优化

现在所有的菜单都可以被同时展开
需求是只能展开一个

实现左侧菜单的折叠与展开功能

:collapse="isCollapse" 是否折叠
:collapse-transition="false"    取消动画效果
侧边栏不会随着折叠发生变化，于是

实现首页路由的重定向

登录之后，默认访问home，但是home占位符的位置会自动重定向到welcome

左侧菜单改造成路由链接

利用这个属性

默认是这个index的值，但是这样不是很好。我们最好用后端返回的path值