gitee地址

一、項目初始化

vue create manager-admin // 創(chuàng)建vue項目// 管理員權(quán)限安裝 cnpm i -S koa@2 // 下載koa2依賴 cnpm install --global koa-generator // 下載框架 koa-generator koa2 manager-server // 創(chuàng)建項目 cd manager-server // 進(jìn)入項目 npm install // 安裝依賴 npm start // 啟動項目cnpm i koa2-cors -S // 解決跨域

二、邏輯梳理

登錄后，接口返回uid → 請求路由權(quán)限API

接口返回該用戶對應(yīng)路由權(quán)限列表（JSON，非樹結(jié)構(gòu)，含pid）

前端將JSON樹形結(jié)構(gòu)化

樹形結(jié)構(gòu)化 → vue路由結(jié)構(gòu)

路由結(jié)構(gòu)動態(tài) → 靜態(tài)路由

樹形結(jié)構(gòu)化數(shù)據(jù) → 菜單組件

// 服務(wù)端 路由列表{id: 2,pid: 0,path: '/course',name: 'Course',title: '課程管理'},{id: 3,pid: 2,path: 'operate',name: 'CourseOperate',link: '/course/operate',title: '課程操作'},

全局的請求數(shù)據(jù)做在vuex的action里，在main.js里dispatch

store/index.js 里引入 state.js mutation.js action.js

libs/utils

前端的權(quán)限控制：根據(jù)后端返回的權(quán)限，做成動態(tài)路由

總結(jié)

以上是生活随笔為你收集整理的vue路由权限（结合服务端koa2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。