handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          # 請求 store 中的方法
          this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch((errorMsg) => {
            this.loading = false
            this.$message({
              type: 'error',
              message: errorMsg
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 用戶名登錄
    LoginByUsername({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        // 請求后臺登陸
        loginByUsername(username, userInfo.password).then(response => {
          const data = response.data
          if (response.data.errorCode !== 200) {
            // 登陸失敗，回傳提示信息
            reject(data.errorMsg)
          }
          // 設置 token，作為用戶已登陸的前端標識，存在 cookie 中
          commit('SET_TOKEN', data.retData)
          setToken(data.retData)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 獲取用戶信息
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        // 請求獲取權限
        getUserInfo(state.token).then(response => {
          if (response.status !== 200) { // 由于mockjs 不支持自定義狀態(tài)碼只能這樣hack
            reject('error')
          }
          const data = response.data
 
          if (data.retData.module && data.retData.module.length > 0) { // 驗證返回的roles是否是一個非空數組
            commit('SET_ROLES', data.retData.module)
          } else {
            // 當用戶無任何權限時設置
            commit('SET_ROLES', ['普通用戶'])
          }
 
          commit('SET_NAME', data.retData.username)
          commit('SET_AVATAR', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
          commit('SET_INTRODUCTION', data.retData.username)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

// response interceptor
service.interceptors.response.use(
  response => response,
  /**
   * 下面的注釋為通過在response里，自定義code來標示請求狀態(tài)
   * 當code返回如下情況則說明權限有問題，登出并返回到登錄頁
   * 如想通過 xmlhttprequest 來狀態(tài)碼標識 邏輯可寫在下面error中
   * 以下代碼均為樣例，請結合自生需求加以修改，若不需要，則可刪除
   */
  // response => {
  //   const res = response.data
  //   if (res.code !== 20000) {
  //     Message({
  //       message: res.message,
  //       type: 'error',
  //       duration: 5 * 1000
  //     })
  //     // 50008:非法的token; 50012:其他客戶端登錄了;  50014:Token 過期了;
  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //       // 請自行在引入 MessageBox
  //       // import { Message, MessageBox } from 'element-ui'
  //       MessageBox.confirm('你已被登出，可以取消繼續(xù)留在該頁面，或者重新登錄', '確定登出', {
  //         confirmButtonText: '重新登錄',
  //         cancelButtonText: '取消',
  //         type: 'warning'
  //       }).then(() => {
  //         store.dispatch('FedLogOut').then(() => {
  //           location.reload() // 為了重新實例化vue-router對象 避免bug
  //         })
  //       })
  //     }
  //     return Promise.reject('error')
  //   } else {
  //     return response.data
  //   }
  // },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: '連接異常',
      // message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

  {
    path: '',
    component: Layout,
    alwaysShow: true,
    redirect: '/xxx/xxx',
    name: 'xxx',
    meta: {
      title: 'xxx',
      icon: 'xxx'
    },
    children: [
      {
        path: '/xxx/xxx',
        component: () => import('@/views/xxx/xxx'),
        name: 'xxx',
        meta: {
          title: 'xxx',
          icon: 'message',
          # 權限標識，每個目錄唯一
          permission: '/xxx/xxx',
          noCache: false }
      }
    ]
  },

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
        // 權限對列表進行過濾
        const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }
  }
}

/**
 * 遞歸過濾異步路由表，返回符合用戶角色權限的路由表
 * @param routes asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      // 是否存在子節(jié)點，存在子節(jié)點說明當前節(jié)點為展開欄，并非頁面
      if (tmp.children) {
        tmp.children = filterAsyncRouter(tmp.children, roles)
        // forCheck() 方法遞歸判斷該節(jié)點下是否存在頁面，不存在則隱藏
        // true：不存在，false：存在
        tmp.hidden = forCheck(tmp.children)
      }
      res.push(tmp)
    }
  })
 
  return res
}
 
/**
 * 遞歸子節(jié)點，判斷是否存在展示頁面，存在返回 false，不存在返回 true
 * @param routes
 */
function forCheck(routes) {
  // 設置默認為隱藏
  let isHidden = true
  // 判斷是否存頁面，不存在說明該節(jié)點下不存在頁面
  if (routes != null && routes.length > 0) {
    // 循環(huán)子目錄，如果子目錄中不存在需要權限頁面
    // 說明子頁面全是展開欄，隱藏
    for (const route of routes) {
      // 存在 permission 說明為頁面，不存在說明為展開欄，將子頁面列表繼續(xù)遞歸
      if (route.meta && route.meta.permission) {
        isHidden = false
        return
      } else {
        isHidden = forCheck(route.children)
      }
    }
  }
  return isHidden
}

/**
 * 通過meta.role判斷是否與當前用戶權限匹配
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.permission) {
    return roles.some(role => route.meta.permission.includes(role.permission))
  } else {
    return true
  }
}