如何允许用户使用 VueJS Router/SPA 公开访问某些路由答案

【问题标题】：How to allow users to access some routes publicly with VueJS Router/SPA如何允许用户使用 VueJS Router/SPA 公开访问某些路由
【发布时间】：2020-03-12 01:46:11
【问题描述】：

我目前正在使用 VueJS SPA、VueJS Router 和 Laravel 构建一个新的 Web 应用程序，用户应该能够访问页面作为访客（未认证）或登录（已认证）！

我为 SpaController 添加了$this->middleware(['auth', 'verified']);，以将我的页面的访问权限仅限于经过身份验证的用户，但某些页面（路由）也应该可以公开访问，但属于 SPA 的一部分。

如何使/:username、/:username/places 路线可公开访问？在用户注销时使用beforeEach 仍然会重定向到/login 页面，看起来$this->middleware(['auth', 'verified']); 不允许到达/:username/places 路由！

routes.js:

import VueRouter from 'vue-router';

import Cities from './views/Cities';
import Places from './views/Places';
import Home from './views/Home';
import Dashboard from './views/Dashboard';
import NotFound from './views/NotFound';

let routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: {    requiresAuth: true   },
    },
    {
        path: '/404',
        name: '404',
        component: NotFound,
        meta: {    requiresAuth: false   },
    },
    {
        path: '/:username',
        name: 'dashboard',
        component: Dashboard,
        meta: {    requiresAuth: false   },
        children: [
            {
                path: 'places',
                name: 'places',
                component: Places,
                meta: {    requiresAuth: false   },
            },
        ]
    },
    {
         path: 'cities',
         name: 'cities',
         component: Cities,
         meta: {    requiresAuth: true   },
    },
    {
        path: '*',
        redirect: '/404'
    },
];

const router = new VueRouter ({
    mode: 'history',
    routes
});

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
       next('/test')
    } else next()
})

export default router

web.php:

Route::get('logout', '\App\Http\Controllers\Auth\LoginController@logout');

Auth::routes(['verify' => true]);

Route::get('/auth/redirect/{provider}', 'Socialite\SocialController@redirect');
Route::get('/callback/{provider}', 'Socialite\SocialController@callback');

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

SpaController.php:

<?php

namespace App\Http\Controllers;

class SpaController extends Controller
{
    // This class and its' functions are available only for authorised and verified users
    public function __construct()
    {
        $this->middleware(['auth', 'verified']);
    }


    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function index()
    {
        return view('spa');
    }
}

spa.blade.php:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    @include('layouts.header')
</head>
<body>
    <div id="app" class="content">
        @include ('layouts.nav')

        <main class="py-4">
            <div class="container">
                <app></app>
            </div>
        </main>
    </div>
    @include('layouts.footer')
</body>
</html>

【问题讨论】：

您可以使用vue-router beforeEach navigation guard。这将在访问您的任何 vue 路由之前调用。您可以将其与 route meta fields 结合使用，您可以在其中指定哪些路由需要身份验证。当然，你需要在某个地方跟踪用户是否登录
这只是one example。它将节点显示为后端，因此您可以跳过第一部分
@ljubadr，感谢您的回复...为了使用导航防护，我应该从 SpaController 评论（删除）$this->middleware('auth')，否则当用户注销并尝试到达任何将他们重定向到/login页面的路线？
$this->middleware('auth') 在 laravel 中。您希望您的后端始终验证用户是否已登录。不要删除该中间件调用，否则您可能会让用户在未登录的情况下访问受限资源
另外，如果用户尝试访问受限页面，可以将他们重定向到登录页面。默认情况下，Laravel 应该在用户登录后将用户重定向回同一页面。

标签： laravel vue.js single-page-application vue-router laravel-api

【解决方案1】：

这可以通过您的laravel route 完成

在您的 routes>api.php 文件中，

Route::middleware('auth:api')->group(function(){
 // contains the api controllers to be accessed when user is logged in
}

//list of routes to be accessed publicly goes here, e.g.
Route::get('/userworkexperience/{user}', 'ControllerName@method')->name('something.else');

希望对你有帮助

【讨论】：