How to Protect Frontend Route in Vue.js and Laravel

app.js

let routes = [
    { path: '/dashboard', component: require('./components/Dashboard.vue').default},
    { path: '/profile', component: require('./components/Profile.vue').default },
    { path: '/users', component: require('./components/Users.vue').default },
    //Frontent routes
    { path: '/', component: require('./components/frontend/blog/PublichHome.vue').default },
    { path: '/blog', component: require('./components/frontend/blog/Blog.vue').default },
    { path: '*', component: require('./components/NotFound.vue').default }
  ]

bobbybouwmann

6 years ago

Level 88

You should use a token for that. Laravel Sanctum is a good solution for that: https://laravel.com/docs/7.x/sanctum

There is also information in the docs about setting this up with Vue and Laravel: https://laravel.com/docs/7.x/sanctum#spa-authentication

joneyspark

6 years ago

Level 4

Thanks for your reply. I checked sanctum docs and there is only protect Laravel route but is it possible to protect in vue.js route for frontend?

Griehle

6 years ago

Level 8

Are you using vue router? Because that has in it navigation guards.

https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

wingly

6 years ago

Level 29

Vue router has navigation guards that you can hook into https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards. Caution this is only for better user experience and you shouldn't rely on this to secure your application

joneyspark

6 years ago

Level 4

Then what is the best option for me to secure?

wingly

6 years ago

Best Answer

Level 29

A combination of both securing your api routes with https://laravel.com/docs/7.x/sanctum and implementing vue route navigation guards

joneyspark

6 years ago

Level 4

That's Great. Have any video series or tutorial you suggest for this?

wingly

6 years ago

Level 29

I think laracasts has a lot of courses on the topic there is also https://laravel.com/docs/7.x/sanctum as @bobbybouwmann mentioned and i don't know if you have access to it as it's a paid product but i found that laravel Nova https://nova.laravel.com/ is handling those stuff pretty gracefully if you have access it's worth digging in the source code

joneyspark

6 years ago

Level 4

Thanks for your suggestion but I don't have any premium access for any where.

bobbybouwmann

6 years ago

Level 88

@joneyspark My first reply already said you can use sanctum for that...

This video should give you a good introduction: https://laracasts.com/series/whats-new-in-laravel-7/episodes/6

joneyspark

6 years ago

Level 4

Thanks for your suggestion. but I saw there is two directory sanctum but I'm using one folder directory for all. so what is better for me ? switch to the new sanctum system ?

Please or to participate in this conversation.