Как отобразить сообщение о том, что пользователь заблокирован на странице входа в компонент Vue в Laravel

#laravel #vuejs2 #inertiajs #jetstream

Вопрос:

Поэтому я использую это промежуточное программное обеспечение в Laravel, чтобы проверить, заблокирован ли пользователь, а затем выйти из системы, если это так:

 class IsUserBanned
{
    /**
     * Handle an incoming request.
     *
     * @param IlluminateHttpRequest $request
     * @param Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (auth()->check() amp;amp; 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>
 

Спасибо.

Комментарии:

1. вы пробовали что — нибудь с vue? ваши данные поступают из api или Интернета?

2. Я использую инерцию и vue2

3. Можете ли вы показать нам, как вы обрабатываете состояние для сообщения?

4. Не уверен, что вы имеете в виду, я что-то пропустил? Как я уже сказал, я новичок в Vue, пытаюсь преобразовать все мои блейды в Vue SPA, обычно эти первые два фрагмента кода работали нормально, нужно ли мне сохранять состояние сообщения? извините за глупые вопросы

Ответ №1:

По умолчанию Vue не имеет доступа к состоянию сеанса Laravel, так как это может привести к утечке информации. Что-то вроде того, что вы предложили (используя v-if директиву для отображения сообщения), сработало бы, но вам все равно придется каким-то образом передать сообщение интерфейсу.

Если вы используете Laravel Jetstream с инерцией и Vue, вы можете просто передать message элемент сеанса своему интерфейсу в качестве реквизита Vue.

В вашем компоненте Vue (если вы используете компоненты с одним файлом, он будет в *.vue файле) вам нужно будет добавить его в свой массив реквизитов, что-то вроде этого:

 // template up here ...

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

А затем вам нужно будет передать опору, когда вы будете реагировать на инерцию со стороны Laravel. Если вы будете следовать своему login маршруту, вы в конечном итоге найдете звонок Inertia::render или inertia(...) помощника. Вы бы добавили сеанс в массив свойств там, что-то вроде этого:

 // probably in routes/web.php

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

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

Именно так вы бы сделали это для передачи свойств на страницу в целом, однако, если вы используете не настроенное представление входа по умолчанию, предоставляемое Laravel Fortify через стартер Jetstream, вам потребуется предпринять дополнительные шаги:

  • SFC Vue, который вы редактируете, скорее всего, находится в resources/js/Pages/Auth/Login.vue
  • Инерционный отклик, отображающий эту страницу, обычно автоматически обрабатывается платформой. Чтобы настроить его, вам нужно будет следовать этим инструкциям и использовать код, который выглядит ближе к этому:
 Fortify::loginView(function () {
    return Inertia::render('Auth/Login', [
        'message' => session('message')
    ]);
});
 

Комментарии:

1. Ты абсолютная легенда! Мне пришлось настроить промежуточное программное обеспечение handleinertiarequests, просто добавив «сообщение» = > сеанс («сообщение») в конце, а затем добавить реквизиты в мой компонент vue, но это сработало, спасибо большое за подробное объяснение и сопроводительные документы, избавили меня от огромной головной боли! Попытался поддержать ваш ответ, но я здесь новичок и пока не могу голосовать, обязательно вернусь и поддержу, когда смогу, еще раз спасибо!

2. @Джо Блэк В любое время! Рад, что смог помочь! Даже если вы не можете проголосовать, вы должны иметь возможность нажать на галочку, чтобы отметить этот ответ как принятый!