如何在 Laravel 中的 Vue 组件的登录页面上显示用户被禁止的消息

Posted 2023-03-07

【中文标题】如何在 Laravel 中的 Vue 组件的登录页面上显示用户被禁止的消息

【英文标题】：How do I display a message that a user is banned on the login page of a Vue component in Laravel

【发布时间】：2021-09-17 14:12:56

【问题描述】：

所以我在 Laravel 中使用这个中间件来检查用户是否被阻止，如果被阻止，则将其注销：

class IsUserBanned

    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    
        if (auth()->check() && auth()->user()->banned_until != null) 

            if (auth()->user()->banned_until == 0) 
                $message = 'Your account has been banned permanently.';
            
            if (now()->lessThan(auth()->user()->banned_until)) 
                $banned_days = now()->diffInDays(auth()->user()->banned_until) + 1;
                $message = 'Your account has been suspended for ' . $banned_days . ' ' . Str::plural('day', $banned_days);
            

            return redirect()->route('login')->with(auth('web')->logout())->with('message', $message);
        

        return $next($request);
    

我知道要在blade.php 中显示消息，我会使用如下内容：

<div class="card-body">
 
    @if (session('message'))
        <div class="alert alert-danger"> session('message') </div>
    @endif
 
    <form method="POST" action=" route('login') ">

我的问题是如何在 Vue 组件中做同样的事情？ v-if 会起作用吗？我是 Vue 新手，如果这是一个愚蠢的问题，我很抱歉......

编辑:: 我的猜测是这样的，但它不起作用

<div v-if="message" class="mb-4 font-medium text-sm text-red-600">
    message 
</div>

谢谢。

【问题讨论】：

你用 vue 试过了吗？您的数据来自 api 还是 web？

我用的是惯性和vue2

你能告诉我们你是如何处理消息状态的吗？

不确定你的意思，我错过了什么吗？就像我说的我是 Vue 的新手，试图将我的所有刀片转换为 Vue SPA 通常前两个代码 sn-ps 工作正常，我需要存储消息状态吗？抱歉这些愚蠢的问题

【参考方案1】：

默认情况下，Vue 无法访问 Laravel 会话状态，因为这可能导致信息泄露。像你提议的东西（使用v-if 指令来显示消息）会工作，但你仍然必须以某种方式将消息传递给前端。

如果您将 Laravel Jetstream 与 Inertia 和 Vue 一起使用，您只需将会话的 message 元素作为 Vue 属性传递给您的前端。

在您的 Vue 组件中（如果您使用的是单文件组件，它将位于 *.vue 文件中），您需要将其添加到您的 props 数组中，如下所示：

// template up here ...

export default 
  data()  ... ,
  props: ['message'] // add to this array
  // ...

然后你需要在 Laravel 端 render an Inertia response 时传递道具。如果您遵循login 路线，您最终会找到对Inertia::render 或inertia(...) 助手的调用。您可以将会话添加到那里的属性数组中，如下所示：

// probably in routes/web.php

Route::get('/login', function() 
  // more code ...

  Inertia::render('Login', [ 'message' => session('message') ]);
); 

一般来说，这是将属性传递给页面的方法，然而，如果你使用 Laravel Fortify 通过 Jetstream 的启动器提供的未自定义的默认登录视图，你将需要采取额外的步骤：

您正在编辑的 Vue SFC 可能在 resources/js/Pages/Auth/Login.vue 呈现该页面的惯性响应通常由框架自动处理。要自定义它，您需要关注 these instructions 并使用看起来更接近此的代码：

Fortify::loginView(function () 
    return Inertia::render('Auth/Login', [
        'message' => session('message')
    ]);
);

【讨论】：

你是一个绝对的传奇！我必须自定义我的 handleinertiarequests 中间件，只需在最后添加 'message' => session('message') ，然后将道具添加到我的 vue 组件中，但它工作得非常感谢您的详细解释和随附的文档为我节省了巨大的头痛！试图为您的答案投票，但我是新来的，无法投票，但我一定会回来投票，再次感谢！

@Joe Black 随时！很高兴我能提供帮助！即使您不能投票，您也应该可以点击复选标记将此答案标记为已接受！