##登录 ###1.router.js 中定义 Login路由

 {
    path: '/login',
    name: 'login',
    meta: {
      title: 'Login - 登录',
      hideInMenu: true
    },
    component: () => import('@/view/login/login.vue')
  }

###2. 定义login组件：login.vue

login.vue组件： 欢迎+背景
login-form.vue：账号和密码登录框（iview 整合的校验）

####2.1 登录异步链

handleLogin( getKey().then(login()).then(//成功 //失败)).then( //成功-路由 //失败-展示异常)

关键点：登录模块的关键点其实是异步控制。包括正向异步处理和异常捕获显示到页面。

• 本质：理解promise的使用，Promise对象表示未来发生的事件，链式

• 理解点：1.async代码块其实是一个方法，参数为（reslove，reject）={}

    async
    new promise（async）  
    -----------------------------------------------------
    new promise（（reslove，reject）={}）
    注1：函数async  是会被立即执行的,只是其中执行的代码可以是异步代码.
    注2：resolve()和reject()的作用：
       如果异步操作成功，则可以调用resolve()来将该实例的状态置为fulfilled，即已完成的，
       如果一旦失败，可以调用reject()来将该实例的状态置为rejected，即失败的。
       就像开关一样，按下开关的同时结束异步，同时可以传入一些值。是传给then的。
       我们常见的res就是resolve的传值。
    promise.then(response => {},err => {})
    注1:then方法接受两个函数作为参数,
      第一个参数是Promise执行成功时的回调
      第二个参数是Promise执行失败时的回调.
      两个函数只会有一个被调用,函数返回值将用作创建then返回的Promise对象
    注2：then返回的是什么，是一个新的 Promise
      简单说，它的思想是，每一个异步任务立刻返回一个Promise对象，如下例，由于是立刻返回，所以可以采用同步操作的流程。
      这个Promises对象有一个then方法，允许指定回调函数，在异步任务完成后调用。
      *这个新Promise对象的状态更改（resolve）时机在上一个Promise的回调函数执行的时候。通过这种方式链起来。
       Promise的then方法可以接受前一个函数的执行结果（异步），还可以保证另一个Promise的顺序执行。
    注3：等待这个promise运行结束才调用 resolve 更改状态，关键是resolve的调用时机
         
    
    var f1 = function (){
     return new Promise(function (resolve, reject){
      setTimeout(function (){
       console.log("f1 ok!")
       resolve("f1 ok!");
      }, 1000)
     });
    }
    var f2 = function (){
     return new Promise(function (resolve, reject){
      setTimeout(function (){
       console.log("f2 ok!")
       resolve("f2 ok!");
      }, 3000)
     });
    }
    var f3 = function (){
     return new Promise(function (resolve, reject){
      setTimeout(function (){
       console.log("f3 ok!")
       resolve("f3 ok!");
      }, 2000)
     });
    }
   当然如果要并行的话，我们很容易想到 Promise.all 方法:
   Promise.all([f1(), f2(), f3()]).then(function (data){
    console.log(data)
   })
   // f1 ok! 
   // f3 ok! 
   // f2 ok! 
   // ["f1 ok!", "f2 ok!", "f3 ok!"]
   
   
   如果要顺序执行：
   f1().then(f2).then(f3)
   // f1 ok!
   // f2 ok!
   // f3 ok!
    
   //或者这样
    
   function f(all) {
    var promise = Promise.resolve();
    all.forEach((p, index) => {
     promise = promise.then(p)
    })
   }
   f([f1, f2, f3])

3 router守卫

###3.1 在每一个router前，设置前置守卫

  导航守卫【进入路由前】
  			【 进度条开启---获取token】
    									---未获取---进入Login组件
  										---获取	---是:flag：user.hasGetInfo
  										                   --- 鉴权---目标页面/401
                                  否:flag:  
                                        ---异常：重新登录
  
  导航守卫【进入路由后】
  			【 设置页面title---进度条关闭】   

###3.2 进入目标路由前，进行鉴权 ####3.2.1 在路由定义访问权限

• 每一个router定义时，如果需要定义路由权限，则在meta.access=[角色] ####3.2.2 完成鉴权功能
• turnTo目标页面
• 鉴权[即将跳转的路由name+access 用户权限数组+routes 路由列表]
• hasAccess = (access, route)：如果参数不存在，通过 存在则验证，比对当前用户的access与路由的access是否一致，通过/拒绝

###3.3 设置后置守卫

router.afterEach(to => {
  setTitle(to, router.app)
  iView.LoadingBar.finish()
  window.scrollTo(0, 0)
})

4 拦截器--登录后获取jwt,所有请求应该附带请求头信息---axios.js

config => {
        if (store.state.user.token) {
          config.headers.Authorization = `${store.state.user.token}`;
          config.headers.appId=`${store.state.user.userId}`;
          config.headers.contentType='application/json';
         }
          this.queue[url] = true
          return config
        },
    ...
 }

5 系统菜单实现

 iview中组件和视图的区别。
 组件是执行具体逻辑的，视图可以理解为组件的壳子。
 二者都是vue,但要互相搭配。