Vue.js Authentication

 Compartiu 

Auth service

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

Vue-router

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

V2 Navigation guards

La documentació la trobareu a:

https://router.vuejs.org/en/advanced/navigation-guards.html

beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

Recursos:

• Docs v1: https://github.com/vuejs/vue-router/blob/1.0/docs/en/api/before-each.md

Exemples

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

Exemples

App SPA amb backend Laravel i frontend Vue (molt similar a Spark!) =

Demo:

http://vue.layer7.be/  (login as [email protected] / admin)

Utilitza middleware JWT per controlar l'accés a l'API.

Info:

• https://forum-archive.vuejs.org/topic/39/starter-application-with-jwt-auth-sample-backend-api
• https://github.com/layer7be/vue-starter
• https://github.com/layer7be/vue-starter-laravel-api

Vegeu també

• Vue.js
• Authentication
• OAuth
• Laravel passport

Enllaços externs

• https://github.com/vuejs/vue-router/tree/next/examples/auth-flow
• http://chandrewz.github.io/blog/authentication-with-vue-router
• http://es.slideshare.net/takuyatejima1/how-to-build-spa-with-vue-router-20