執(zhí)行命令：git config --global url.“https://”.insteadOf git://
重新 npm  i          
成功！
npm run dev 啟動成功

router.beforeEach(async(to, from, next) => {
  // 從cookie中取得token
  const hasToken = getToken()
  
  // 如果有token 也就是已經(jīng)登陸的情況下
  if (hasToken) {
    // 并且要前往的路徑是'/login'  則返回 '/' 
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      // 從store中取得用戶的 roles, 也就是用戶的權限 并且用戶的權限數(shù)組必須有一個以上
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      // 有權限則直接進入
      if (hasRoles) {
        next()
      } else {
        // 沒有權限的話
        try {
          // 獲取用戶信息
          const { roles } = await store.dispatch('user/getInfo')
          // 生成可訪問路由
          const accessRoutes = await store.dispatch('permission/generateRoutes',                                    roles)
          // 將可訪問路由添加到路由上
          router.addRoutes(accessRoutes)
          // 進入路由
          next({ ...to, replace: true })
        } catch (error) {
          // 如果出現(xiàn)異常  清空路由 
          await store.dispatch('user/resetToken')
          // Message提示錯誤
          Message.error(error || 'Has Error')
          // 跳到login頁面重新登陸
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    // 沒有token 也就是沒有登陸的情況下  
    // 判斷是否是白名單(也就是說不需要登陸就可以訪問的路由)
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      // 其他的一律給我跳到login頁面 老老實實的進行登陸
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

// 判斷是否有權限
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    // roles.some => Array.some 相當于是只要有一個滿足就為true 
      
    // 判斷用戶的權限于當前路由訪問所需要的權限是否有一個滿足
    // 比如說用戶權限為 ['one','two']  當前路由訪問所需要權限為 ['two','three']  那么就說明當前用戶可以訪問這個路由
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    // 默認是可訪問的
    return true
  }
}
// 生成可訪問路由
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    // 判斷當前路由是否可以訪問
    if (hasPermission(roles, tmp)) {
      // 如果當前路由還有子路由
      if (tmp.children) {
        // 進行遞歸處理
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      // 將可訪問路由放入數(shù)組中
      res.push(tmp)
    }
  })  
  // 返回
  return res
}
// 為什么要寫這里呢，因為后面的Sidebar組件與這個環(huán)環(huán)相扣
const mutations = {
  SET_ROUTES: (state, routes) => {
    // 添加的路由
    state.addRoutes = routes
    // 將vuex中的路由進行更新
    state.routes = constantRoutes.concat(routes)
  }
}
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      // 如果roles包含 'admin' 直接可以全部訪問
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        // 利用 filterAsyncRoutes 過濾出可訪問的路由
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      // 保存可訪問的路由到store中
      commit('SET_ROUTES', accessedRoutes)
      // 將可訪問路由返回
      resolve(accessedRoutes)
    })
  }
}

Message.error(response.data.data|| "出現(xiàn)錯誤，請稍后再試");//寫法錯誤，

Message.error({
  message: response.data.data || "出現(xiàn)錯誤，請稍后再試"
})
或
Message({
  type:'error',
  message: response.data.data || "出現(xiàn)錯誤，請稍后再試"
})