vue-element-admin登錄邏輯，以及動態添加路由，顯示側邊欄

這段時間在研究element-admin，感覺這個庫有許多值得學習的地方，我學習這個庫的方法是，先看它的路由，順着路由，摸清它的邏輯，有點像順藤摸瓜。

這個庫分的模塊非常清晰，適合多人合作開發項目，但是如果一個人去用這個庫開發后台，步驟顯的有點繁瑣，特別是調用后端接口，之前一個方法就調用到了，但是用這個庫，需要先后分幾步調用。

比如說調用一個登陸接口：點擊登陸按鈕----》調用store中的方法----》調用api中對應登陸的方法---》request.js中封裝的axios方法

4步！！！！，讓我看來確實是有點繁瑣，這個問題到后面解決，通過自己封裝的axios方法，直接調用后台接口，目前不知道會不會遇到其它問題。好了，接下來進入正題！！！

 

接下來先介紹一下，element-admin的登錄邏輯

1、先看登錄方法里寫什么：

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          //調用user模塊紅的login
          console.log("點擊登陸按鈕")
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            console.log("登錄成功");
            this.$router.push({ path: this.redirect || '/' });
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }

通過上面紅色代碼，可以看出，點擊過登錄按鈕后，調用了$store里的一個方法，名叫login

2、下面來看看$store里的這個login方法：

import { login, logout, getInfo,self} from '@/api/user'

const actions = {
  // user login
 login({ commit }, userInfo) {
    const { username, password } = userInfo;
    return new Promise((resolve, reject) => {
      console.log("vuex中的請求")
      login({ username: username.trim(), password: password }).then(response => {
        console.log('vuex中')
        console.log(response);
        const { data } = response;
        commit('SET_TOKEN', data.token);//存在vueX中
        setToken(data.token);//存在cookie中
        resolve();
      }).catch(error => {
        console.log(error);
        reject(error);
      })
    })
  },

咿，怎么兩個login，熟悉vuex的話應該知道，第一個login是$store中的方法，第二個login方法是，api里的login方法，用來調用接口的

3、再來看看api中的login方法：

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

上面是api中的login方法，它調用了request.js，request.js是封裝了axios，是用來請求后台接口的，如果這個接口請求成功了，就回到了第一步中的.then()方法中

代碼是，路由跳轉到首頁，進入正式頁面！！！

重點來了！！！

之所以是稱之為權限，也就是必須滿足一定的條件才能夠訪問到正常頁面，那么如果不滿足呢？如果我沒有token，讓不讓我進正常頁面呢？？

肯定是不讓的，那我沒有token，該去哪？答案是還待在登錄頁，哪都去不了，那么這些處理應該在哪寫呢？答案是，permission.js模塊

這個js在main.js引入，其實就是個路由攔截器：來看看它的代碼：

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar  一個進度條的插件
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration  是否有轉圈效果

const whiteList = ['/login'] // 沒有重定向白名單

router.beforeEach(async(to, from, next) => {
  // 開始進度條
  NProgress.start()

  // 設置頁面標題
  document.title = getPageTitle(to.meta.title)

  // 確定用戶是否已登錄
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登錄，則重定向到主頁
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name;
      console.log(hasGetUserInfo);
      if (hasGetUserInfo) {
        console.log("有用戶信息");
        next();
      } else {
        console.log("無用戶信息")
        try {
          // 獲得用戶信息
          await store.dispatch('user/getInfo');
          //實際是請求用戶信息后返回，這里是模擬數據，直接從store中取
          const roles=store.getters.roles; store.dispatch('permission/GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
            router.addRoutes(store.getters.addRouters); // 動態添加可訪問路由表
            router.options.routes=store.getters.routers; next({ ...to, replace: true });// hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
 }) // next()
        } catch (error) {
          // 刪除token，進入登錄頁面重新登錄
          await store.dispatch('user/resetToken');
          Message.error(error || 'Has Error');
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免費登錄白名單，直接去
      next()
    } else {
      // 沒有訪問權限的其他頁面被重定向到登錄頁面。
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // 完成進度條
  NProgress.done()
})

一看代碼好多，不過不要怕，我來分析一下它的情況，不就是點if else嘛

從上面代碼看，每次路由跳轉，都要從cookie中取token，

那么可以分兩種情況，有token和無token

有token：再看看是不是去登錄頁的，登錄頁肯定不能攔截的，如果是登錄頁就直接放行。如果不是登錄頁，就要看看本地有沒有用戶信息，看看cookie中有沒有用戶信息（不一定是token，也可能是localstorage）。如果有用戶信息，放行。如果沒有用戶信息，就調用接口去獲取登錄信息，然后后面還有一點代碼，涉及到了動態添加路由（這里先說到這，后面具體說動態添加權限路由的事）。獲取到用戶信息后放行。如果在獲取用戶信息的過程中報錯，則回到登錄頁

無token：先看看用戶要進入的頁面是不是在白名單內，一般登錄、注冊、忘記密碼都是在白名單內的，這些頁面，在無token的情況下也是直接放行。如果不在白名單內，滾回登錄頁。

以上就是element-admin的登錄邏輯了。不知道能否幫助到你，但是寫下來，讓自己的思路更清晰，也是不錯的。

 

 

下面來說一下，element-admin的動態權限路由，顯示側邊欄是什么邏輯

首先要了解一下，側邊欄是如何渲染出來的，看看layout/components/slibar/index.vue有這樣一段代碼：

<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />

計算屬性中有這樣一段代碼：

　　routes() {
      return this.$router.options.routes
    },

這個routes，是路由的元信息！！！是一個數組

看到這就應該明白，側邊欄是如何渲染出來的，

再來看看router.js里的代碼：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * 注意: 子菜單只在路由子菜單時出現。長度> = 1
 * 參考網址: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   如果設置為true，項目將不會顯示在側欄中(默認為false)
 * alwaysShow: true               如果設置為true，將始終顯示根菜單
 *                                如果不設置alwaysShow, 當項目有多個子路由時，它將成為嵌套模式，否則不顯示根菜單
 * redirect: noRedirect           如果設置noRedirect，則不會在面包屑中重定向
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    控制頁面角色(可以設置多個角色)
    title: 'title'               名稱顯示在側邊欄和面包屑(推薦集)
    icon: 'svg-name'             圖標顯示在側欄中
    breadcrumb: false            如果設置為false，則該項將隱藏在breadcrumb中(默認為true)
    activeMenu: '/example/list'  如果設置路徑，側欄將突出顯示您設置的路徑
  }
 */

/**
 * constantRoutes
 * 沒有權限要求的基本頁
 * 所有角色都可以訪問
 * 不需要動態判斷權限的路由
 */
export const constantRoutes = [

  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/self',
    children: [{
      path: 'self',
      name: 'Self',
      component: () => import('@/views/self/index'),
      meta: { title: '首頁', icon: 'dashboard' }
    }]
  },

  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table'}
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree',breadcrumb: true},
        hidden: false,//在側邊欄上顯示  true為不顯示  當父路由的字路由為1個時，不顯示父路由，直接顯示子路由
        alwaysShow:false,//默認是false   設置為true時會忽略設置的權限 一致顯示在跟路由上
      }
    ]
  },
  
  {
    path: '/form',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: { title: 'Form', icon: 'form' }
      }
    ]
  },

  {
    path: '/nested',
    component: Layout,
    redirect: '/nested/menu1',
    name: 'Nested',
    meta: {
      title: 'Nested',
      icon: 'nested'
    },
    children: [
      {
        path: 'menu1',
        component: () => import('@/views/nested/menu1/index'), // Parent router-view
        name: 'Menu1',
        meta: { title: 'Menu1' },
        children: [
          {
            path: 'menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1'),
            name: 'Menu1-1',
            meta: { title: 'Menu1-1' }
          },
          {
            path: 'menu1-2',
            component: () => import('@/views/nested/menu1/menu1-2'),
            name: 'Menu1-2',
            meta: { title: 'Menu1-2' },
            children: [
              {
                path: 'menu1-2-1',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                name: 'Menu1-2-1',
                meta: { title: 'Menu1-2-1' }
              },
              {
                path: 'menu1-2-2',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
                name: 'Menu1-2-2',
                meta: { title: 'Menu1-2-2' }
              }
            ]
          },
          {
            path: 'menu1-3',
            component: () => import('@/views/nested/menu1/menu1-3'),
            name: 'Menu1-3',
            meta: { title: 'Menu1-3' }
          }
        ]
      },
      
    ]
  },
  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  },
  {
    path: '/self',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'self',
        component: () => import('@/views/self'),
        meta: { title: 'self', icon: 'form' }
      }
    ]
  },

  // 404頁面必須放在最后!!
  // { path: '*', redirect: '/404', hidden: true }
]

// 創建路由
const createRouter = () => new Router({
  // mode: 'history', // 需要服務支持
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

var router = createRouter()

// 重置路由
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}


//異步掛載的路由
//動態需要根據權限加載的路由表 
export const asyncRouterMap = [
  {
    path: '/permission',
    component: Layout,
    name: 'permission',
    redirect: '/permission/index222',
    meta: {title:'permission', role: ['admin','super_editor'] }, //頁面需要的權限
    children: [
      { 
        path: 'index222',
        component: () => import('@/views/self'),
        name: 'index222',
        meta: {title:'權限測試1',role: ['admin','super_editor'] }  //頁面需要的權限
      },
      { 
        path: 'index333',
        component: () => import('@/views/self'),
        name: 'index333',
        meta: {title:'權限測試2',role: ['admin','super_editor'] }  //頁面需要的權限
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
];



export default router

注意以上代碼中紅色的代碼，這個routes中分兩塊路由配置，一塊是固定的，無權限的路由配置，也就是不管是管理員身份，還是超級管理員身份，都會顯示的路由配置。

第二塊是，帶權限的路由配置，根據用戶權限來顯示側邊欄。注意，帶權限的配置里的meta中都有role項，代表是權限

 

首先，我們在獲取用戶信息時，會得到這個用戶有哪些權限，是一個數組，假如是這樣的

commit('SET_ROLES',['admin','super_editor']);//自定義權限

這個用戶的權限有這些（admin、super_editor），然后再根據用戶權限來篩選出符合的動態添加的路由，

什么時候篩選呢？

這就用到登錄時的攔截器了，上面遇到過，就在哪執行，來看看那里都是寫了一些什么代碼：

拿到這看看：

          // 獲得用戶信息
          await store.dispatch('user/getInfo');
          //實際是請求用戶信息后返回，這里是模擬數據，直接從store中取
          const roles=store.getters.roles;
          store.dispatch('permission/GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
            router.addRoutes(store.getters.addRouters); // 動態添加可訪問路由表
            router.options.routes=store.getters.routers;
            next({ ...to, replace: true });// hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })

routes其實就是上面的兩個權限組成的數組，然后傳入了GenerateRoutes方法內，（注意es6語法，看不懂的去了解一下es6），再看看GenerateRoutes中的代碼：

import { asyncRouterMap, constantRoutes } from '@/router';

function hasPermission(roles, route) {
    if (route.meta && route.meta.role) {
        return roles.some(role => route.meta.role.indexOf(role) >= 0)
    } else {
        return true
    }
}
  
const permission = {
    namespaced: true,
    state: {
        routers: constantRoutes,
        addRouters: []
    },
    mutations: {
      SET_ROUTERS: (state, routers) => {
        state.addRouters = routers;
        state.routers = constantRoutes.concat(routers);
      }
    },
    actions: {
        GenerateRoutes({ commit }, data) {//roles是用戶所帶的權限
            return new Promise(resolve => { const { roles } = data; const accessedRouters = asyncRouterMap.filter(v => { // if (roles.indexOf('admin') >= 0) {
                    // return true;
                    // };
                    if (hasPermission(roles, v)) { if (v.children && v.children.length > 0) { v.children = v.children.filter(child => { if (hasPermission(roles, child)) { return child } return false; }); return v } else { return v } } return false; }); commit('SET_ROUTERS', accessedRouters); resolve(); }) }
    }
};
  
export default permission;

GenerateRoutes方法辦了一件事，就是把動態路由配置里符合用戶權限的配置篩選出來，組成一個數組，然后，和固定路由合並到了一起，存到了vuex中，

然后調用了這兩句代碼：

        　　router.addRoutes(store.getters.addRouters); // 動態添加可訪問路由表
            router.options.routes=store.getters.routers;

router.addRoutes（）方法是，動態添加路由配置，參數是符合路由配置的數組，
然后將路由元信息，變成合並后的路由元信息，因為渲染側邊欄需要用到，
這兩句代碼，順序不能變，缺一不可，缺了addRoutes，點擊側邊欄的動態路由會無反應，缺了options，側邊欄顯示不出來動態添加的路由！！！！

以上就是element-admin的動態路由了，睡覺。。。。

今天正式開始用這個模板開發了，想說一下，這個模板有許多模塊，我用不到，比如說mock文件，當我們不用它本身的api去請求接口時，完全可以將它刪除，我是今天把它原有的登錄邏輯去掉了，登錄時，就不會有mock的事了。
於是，我一個一個文件去注釋，對運行不影響的都刪除了，test文件一下刪除了，還有些不知道是干什么的js也去了，這樣項目看着對我來說比較輕巧，也比較熟悉。另外，哪些utils。還有store里不用的方法都可以去掉。
當我把登錄改了之后，能去掉一大堆東西好不好。ok，有時間整理一個輕巧的模板，掛到碼雲上

更新一個bug，目前頁面上的路由攔截器的邏輯，並不是我現在用的邏輯，不過相差不遠，項目上線后，發現刷新動態加載的路由頁面，頁面白屏，調試一下，發現是路由攔截器在重復跳轉頁面，這問題很奇怪，
本地沒有問題，然后琢磨了半天，既然是重復跳轉，它有一個特征就是：to.path==from.path;那么可以利用這一特質，去攔截這種情況，

if(to.path==from.path){
    next();
    return;
}

 

監聽瀏覽器前進后退事件

window.addEventListener("popstate", function () {
  backStatus=true;
  return;
})