Prevent users to access some routes in Laravel and Vue - laravel

Question

I'm using building an SPA using Laravel and Vue and I don't want users to access the /products/create route I've tried using Laravel middlewares but it didn't help
Here's my App.vue component
<template>
<div>
<Navbar :name="user.name"/>
<router-view></router-view>
</div>
</template>
<script>
import Navbar from "./Navbar";
export default {
name: "App",
props: [
'user'
],
components: {
Navbar,
},
created() {
window.axios.interceptors.request.use(config => {
config.headers.common['Authorization'] = 'Bearer ' + this.user.api_token;
return config;
});
},
}
</script>
IsAdmin.php
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Support\Facades\Auth;
class IsAdmin
{
public function handle($request, Closure $next)
{
if (! Auth::user()->isAdmin) {
return response()->json(['error' => 'Unauthorized'], 403);
}
return $next($request);
}
}
How do I redirect non-authorized users to a 404 page?

Answer 1

For vue routes protection
To protect vue routes you can use navigation guards which are a specific feature within Vue Router that provide additional functionality pertaining to how routes get resolved.
You must be using vue-router package to use routes in vuejs app
In src/router/index.js , you can add route guard as following
import Vue from "vue";
import Router from "vue-router";
import Main from "#/components/Main";
import Products from "#/components/Products";
import Create from "#/components/Create";
import Show from "#/components/Show";
import Unauthorised from "#/components/Unauthorised";
//use vue router
Vue.use(Router);
//init Router and define some routes
export default new Router({
routes: [
{
path: '/',
name: 'Main',
component: Main
},
{
path: '/products',
name: 'Products',
component: Products
},
{
path: '/create',
name: 'Create',
component: Create
},
{
path: '/show',
name: 'Show',
component: Show
},
{
path: '/unauthorised',
name: 'Unauthorised',
component: Unauthorised
}
]
})
//apply route guard
router.beforeEach((to, from, next) => {
//list of blocked routes
const protectedRoutes = ['/products', '/create'];
//the route user is trying to access is in blocked routes list
if (protectedRoutes.includes(to.path)) {
//redirect to route having unauhorised message page
return next('/unauthorised');
}
)
else
{
// otherwise allow user to access route
return next();
}
In this example there are five routes i.e / , /products , /create , /show and last one /unauthorised to show error. Here, if any user tries to access routes listed in $protectedRoutes then they will be redirected to /unauthorised route otherwise allowed to access other routes
you can learn more about vue router guard here and about vue-router here.Additionally, you can guard your routes based on user roles or any other conditions.I recommend you to use vuex to manage user state and manage routes access based on role stored on user state

Answer 2

You're not providing enough information, but the way I do it is using Laravel policies.
I would setup a policy for Products like this:
namespace App\Policies;
use App\Product;
use App\User;
use Illuminate\Auth\Access\HandlesAuthorization;
class ProductPolicy
{
use HandlesAuthorization;
/**
* Determine whether the user can create products.
*
* #param \App\User $user
* #return mixed
*/
public function create(User $user)
{
return $user->hasPermissionTo('create products');
}
}
Register your policies in the App\Providers\AuthServiceProvider.php
protected $policies = [
'App\Product' => 'App\Policies\ProductPolicy',
];
Then in your Product controller you will need to add this in order to got through the authorization process:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
public function store(Request $request)
{
$this->authorize('create', Product::class)
// The current user is authorized to make this request.
}
}
You will probably like to prevent unauthorized users to even have access your vue route where you create products. In order to do so you would have to pass the users permissions into your vue app.
return [
'name' => $user->name,
'permissions' => [
'createProducts' => $user->can('create', \App\Product::class)
]
}
Then in your vue app:
<router-link v-if="user.permissions.createProducts" to="/products/create">
New Product
</router-link>