Comentar API:
https://github.com/vuejs/vue-router/blob/next/examples/auth-flow/auth.js
Com s'utilitzen callbacks (http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/) i els mètodes comuns
NOTA: Tingueu en compte que trobareu documentació per a la v2 i per a la v1 de Vue i de vue-router i que hi han hagut canvis, per exemple abans parlavem de router hooks (v1) i ara de Navigation Guards. Vegeu transparència 10 a http://es.slideshare.net/takuyatejima1/how-to-build-spa-with-vue-router-20
Exemple:
https://github.com/vuejs/vue-router/tree/next/examples/auth-flow
La documentació la trobareu a:
https://router.vuejs.org/en/advanced/navigation-guards.html
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
Recursos:
de:
https://mattstauffer.co/blog/getting-started-using-vues-vue-router-for-single-page-apps
// Sample means of checking user access var MyUser = { admin: false }; router.beforeEach(function (transition) { if (transition.to.adminOnly && ! MyUser.admin) { transition.redirect('/login'); } else { transition.next(); } });
NOTA: A vue 2 no hi ha un transition sinó un to, un from i un next. Vegeu https://router.vuejs.org/en/advanced/navigation-guards.html
Demo:
http://vue.layer7.be/ (login as [email protected] / admin)
Utilitza middleware JWT per controlar l'accés a l'API.
Info: