Запретить пользователям доступ к некоторым маршрутам в Laravel и Vue - PullRequest
Новая
       22

Запретить пользователям доступ к некоторым маршрутам в Laravel и Vue

1 голос
/ 22 января 2020

Я использую создание SPA, используя Laravel и Vue, и я не хочу, чтобы пользователи получали доступ к маршруту /products/create, который я пробовал использовать промежуточное ПО Laravel, но это не помогло

Вот мое приложение. vue компонент 

<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);
    }
}

Как перенаправить неавторизованных пользователей на страницу 404?

Ответы [ 2 ]

3 голосов
/ 22 января 2020

Для vue защиты маршрутов

Для защиты vue маршрутов вы можете использовать навигационные средства защиты, которые являются специфической c функцией в Vue Маршрутизаторе, который предоставляет дополнительные функции, относящиеся к тому, как разрешаются маршруты.

Вы должны использовать пакет vue -router для использования маршрутов в vuejs app

В src/router/index.js вы можете добавить защиту маршрута следующим образом 

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();
}

В этом примере есть пять маршрутов, например /, /products, /create, /show и последний /unauthorised для отображения ошибки. Здесь, если какой-либо пользователь попытается получить доступ к маршрутам, перечисленным в $protectedRoutes, он будет перенаправлен на /unauthorised маршрут, в противном случае ему будет разрешен доступ к другим маршрутам

, вы можете узнать больше о vue Router Guard здесь и около vue-router здесь . Кроме того, вы можете защищать свои маршруты на основе ролей пользователей или любых других условий. Я рекомендую использовать vuex для управления состоянием пользователя и управлять доступом к маршрутам на основе роли, сохраненной в состоянии пользователя

2 голосов
/ 22 января 2020

Вы не предоставляете достаточно информации, но я использую Laravel политики .

Я бы настроил политику для таких продуктов: 

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');
    }
}

Зарегистрируйте свои политики в App \ Providers \ AuthServiceProvider. php

protected $policies = [
        'App\Product' => 'App\Policies\ProductPolicy',
    ];

Затем в контроллере продукта вам необходимо добавить это для прохождения процесса авторизации: 

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.
    }
}

Возможно, вы не захотите, чтобы неавторизованные пользователи даже не имели доступа к вашему маршруту vue, где вы создаете продукты. Для этого вам нужно будет передать права пользователей в ваше приложение vue. 

return [
    'name' => $user->name,
    'permissions' => [
        'createProducts' => $user->can('create', \App\Product::class)
    ]
}

Затем в вашем приложении vue: 

<router-link v-if="user.permissions.createProducts" to="/products/create">
    New Product
</router-link>
...