目前專案使用者權限依賴關係:
使用者基礎權限
#所在部門的權限
#所在職位的權限
#使用者特殊權限
#因為權限比較複雜如果將路由在前端寫死的話,那麼一個普通員工登入後也要載入幾百甚至上千個路由及對應的元件。
效能問題
前後端都要做權限驗證,想到這個就頭痛
#基於這兩項考慮,決定將路由寫在資料庫中,然後後端根據登入使用者的權限動態分配路由給前端載入。
但是我在前端用ajax請求的時候,發現總是在vue初始化完成後(也就是說路由已經載入了)才向後台請求路由資料
請求的程式碼放在main.js和vue生命週期的beforeCreate中都一樣
const routes = []; const router = new VueRouter({ mode: 'history', linkActiveClass: 'active', routes }) const app = new Vue({ router, el: '#app', data: routes, template: ' ', components: { App }, created: function () { const self = this axios.get('https://service.it/api/routes') .then(function (response) { self.routes = response.data; }) .catch(function (error) { console.log(error) }) } })
求前端大神解答!
vue-router@2.2.0開始,
router.addRoute(routes)
動態新增路由使用axios 先ajax請求得到路由配置 再初始化vue實體