vue vuex vue-router後臺專案——許可權路由（超詳細簡單版）

specialGirl發表於2018-01-04
Vue路由

專案地址：vue-simple-template 共三個角色：adan barbara carrie 密碼全是：123456

adan 擁有 最高許可權A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）

barbara 擁有 許可權B 他可以看到 red 和 yellow 頁面

carrie 擁有 許可權C 他可以看到 red 和 blue 頁面

vue vuex vue-router後臺專案——許可權路由（超詳細簡單版）

技術棧

webpack         ---- 打包神器
vue             ---- JavaScript 框架
vuex            ---- 實現不同元件間的狀態共享
vue-router      ---- 頁面路由
babel-polyfill  ---- 將ES6程式碼轉為ES5程式碼
normalize.css   ---- 重置掉該重置的樣式
element-ui      ---- UI元件庫
複製程式碼

專案初始化

# cd 到專案資料夾
cd weven-simple-template
# 安裝依賴 （本專案還安裝了其他依賴詳情 請見 package.json 檔案）
npm install
# 執行專案
npm run dev
複製程式碼

專案結構

vue-cil 腳手架初始化專案後，我只修改過src資料夾

src
├── App.vue         ---- 頁面入口
├── api             ---- api請求
│   └── login.js    ---- 模擬json物件資料
├── assets          ---- 主題 字型等靜態資源
│   └── logo.png
├── components      ---- 元件
│   ├── index.vue
│   └── login.vue 
├── main.js         ---- 初始化元件 載入路由
├── router          ---- 路由
│   └── index.js
└── store           ---- vuex狀態管理
    ├── getters.js
    ├── index.js
    └── modules
        └── login.js
複製程式碼

重點：

動態路由的關鍵在於router配置的meta欄位和vuex的暴露在外的getter欄位

// ----  router/index.js  ----
// 初始化路由
export default new Router({  
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]  
});
// 動態路由 meta 定義了role
export const powerRouter =[    
    { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
      children: [
        { path: '/red', name: 'red', component: red,},
        { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
        { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
      ]
    }
];
複製程式碼
// ----  main.js  ----
router.beforeEach((to, from, next) => {
    if(store.getters.role){ //判斷role 是否存在
    	
    	if(store.getters.newrouter.length !== 0){  
       		next() //resolve 鉤子
	    }else{
	    	let newrouter
       		if (store.getters.role == 'A') {  //判斷許可權
                newrouter = powerRouter
            } else {
                let newchildren = powerRouter[0].children.filter(route => {
                    if(route.meta){
                    	if(route.meta.role == store.getters.role){
                    		return true
                        }
                        return false
                    }else{
                        return true
                    }
                });
                newrouter = powerRouter
                newrouter[0].children = newchildren
            }
            router.addRoutes(newrouter) //新增動態路由
            store.dispatch('Roles',newrouter).then(res => { 
                next({ ...to })
            }).catch(() => {       

            })
	    }	  
    }else{
       	if (['/login'].indexOf(to.path) !== -1) { 
           next()
        } else {
           next('/login')
        }
	}
})
複製程式碼
// ----  components/index.vue  ----
// mapGetters 輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性

...mapGetters([
        'newrouter'
    ])
    
複製程式碼

此專案拿去 捋清楚 vue+vuex+vue-router 的關係是沒問題的，這可以說的超級簡單的版本，適合初學。可以配合相關的官方文件學習。上面的內容說的重點，其實也算是專案的全部啦

專案地址：vue-simple-template 感覺還不錯的話就請給個 star 吧～ 謝謝

有什麼問題歡迎提問～

相關文章