後台管理動態許可權配置思路筆記

1.後端返回路由的思路

1. 登入後，後端返回路由許可權api列表json 2. 處理後端返回的json,轉化成vue的路由結構 3. 將靜態路由結構轉化成動態路由

4. 最後動態渲染選單元件

2.前後端可以這樣定義路由規則

module.exports =[,
,,,,
,]

3.面試官問後台管理許可權的路由思路

一些中小型的公司的路由許可權可能是這樣做的，先把所有的路由寫好，靜態的放在路由表的裡面做乙個變數，然後從後端請求回資料以後，再去對比這張靜態表，然後再刪減，最後再合併到原本的路由當中去，實際上這樣做是不對的。

真正的路由應該從後端的表裡面直接取出來，然後返回給前端，前端根據定義的規則形成樹（路由樹），然後轉成路由，最後再渲染到真正的路由上。

4.後端返回 api , 解析看得到的初級，中級，高階路由的許可權（品好下走）

// id :1 許可權等級 // 等級的稱呼沒多大作用過 // auth 裡面的數字，就是當前等級能看到的路由許可權，對應的是上面路由表裡的id，往上翻，看明白了再回來 module.exports =[,

,,]

5.接下來的步驟還是後端處理，大概思路就是，根據登入使用者的等級，對應相應auth裡面的數字 id ，迴圈，與上上面定義路由表裡的id對比，有相同的就返回給前端（這裡是後端的思路，前端了解最好，工作了可以跟後端***）

6.再下面就到前端了，開始幹活吧

// 2.呼叫第一步介面，uid好比傳的3，返回的資料如下圖，不明白的話可以看一下id 為3物件下面auth陣列裡的數字

// 3. 轉樹，轉成vue的路由樹，根據的是前後端共同定義的規則，忘了看第二大步(上面上面)，這裡要用vuex了

// state 檔案 export default

// actions 檔案  請求非同步處理的地方
import
from
'../services'
;// 這裡是引用的axios的介面
import
from
'../libs/utils'
;// 結構化的封裝方法
export
default
)// 在 main.js裡面執行上面這個方法
// import store from './stort' 有的就不用加了，沒有的別忘了引入
// store.dispatch('setuserrouters')
}

// mutations.js 檔案
export
default
,setuserrouters
(state, userrouters)
}// 完事做路由了

// libs/utils.js 檔案
function
formatroutertree
(data)
else}}
)})}
return parents;
// 返回
}export

// main.js 檔案
import store from
'./stort'
// 有的就不用加了，沒有的別忘了引入
store.
dispatch
('setuserrouters'
)// 呼叫actions 方法，返回路由物件

渲染真正的路由上這裡還把方法寫到 utils.js 裡

// libs/utils.js 檔案
function
formatroutertree
(data)
else}}
)})}
return parents;
// 返回
}function
generaterouter
(userrouters)`)
}if(r.children)
return routes;})
return newrouters;
// 最終路由
}export

8.main.js

// main.js 檔案
import store from
'./stort'
// 有的就不用加了，沒有的別忘了引入
import
from
'@/libs/utils'
// 引入路由樹
router.
beforeach
(async
(to, form, next)
=>)}
else
})

9.完畢建立頁面，檢視效果

// 檢視所有路由，建立頁面 有子路由的記得加

後台管理動態許可權配置思路筆記

後台許可權管理

iOS許可權管理思路

Vue後台許可權管理

後台管理動態許可權配置思路 筆記

後台許可權管理

iOS許可權管理思路

Vue後台許可權管理

相關推薦

後台管理動態許可權配置思路筆記