Current project user permission dependencies:
Basic User Permissions
Permissions of your department
Permissions for your position
User special permissions
Because the permissions are more complicated, if the routing is hard-coded on the front end, then an ordinary employee will have to load hundreds or even thousands of routes and corresponding components after logging in.
Performance issues
Both the front and backends need to verify permissions. Thinking of this gives me a headache
Based on these two considerations, it was decided to write the routes in the database, and then the backend dynamically allocates routes to the frontend for loading based on the permissions of the logged in user.
But when I use ajax to request on the front end, I find that routing data is always requested from the background after vue initialization is completed (that is, the route has been loaded)
The requested code is placed the same in main.js and beforeCreate of the vue life cycle
const routes = [];
const router = new VueRouter({
mode: 'history',
linkActiveClass: 'active',
routes
})
const app = new Vue({
router,
el: '#app',
data: routes,
template: '<App/>',
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)
})
}
})
Please answer from the front-end master!
phpcn_u15822017-05-16 16:50:20
vue-router@2.2.0 starts, router.addRoute(routes)
dynamically adds routes
滿天的星座2017-05-16 16:50:20
Use axios to first request the routing configuration via ajax and then initialize the vue entity