Блог

Главная - Вопросы по программированию - Как мне проверить, «авторизован» ли пользователь в компоненте react при использовании аутентификации laravel?

Как мне проверить, «авторизован» ли пользователь в компоненте react при использовании аутентификации laravel?

#reactjs #laravel

#reactjs #laravel

Вопрос:

Я настроил аутентификацию laravel на своем веб-сайте. Это работает очень хорошо, но я хочу знать, как я могу проверить, авторизован ли пользователь внутри компонента react, и отобразить его / ее конкретное содержимое.

Ответ №1:

Один из подходов, который я использовал для решения проблемы с проверкой, авторизован ли пользователь, заключается в том, чтобы прикрепить его к вашему основному файлу блейда как «глобальные данные». Сначала настройте свой контроллер.

 public function index()
{        
    return view('welcome')->with(["globalData" => collect([
        'user' => Auth::user()
    ]);
}

Затем в вашем корневом блейд-файле

 <script>
    let globalData = "{!! $globalData->toJson() !!}";
</script>

Затем вы можете получить доступ к свойству пользователя в любом месте ваших компонентов, сославшись на globalData.user и, таким образом, проверить, user является ли это object или null / empty.

Пример из проекта React версии 15.4.2

Контроллер

 class GuiController extends Controller
{
    public function __construct() {
        $this->data = [
            'projects' => $this->projects(), 
            'packs' => Pack::all(),
            'stimpack_io_token' => env('STIMPACK_IO_TOKEN'),
            'stimpack_data_url' => env('STIMPACK_DATA_URL'),
            'manipulatorData' => ManipulatorController::attachStartupData()
        ];
    }

    public function index()
    {        
        return view('welcome')->with(["data" => collect($this->data)]);
    }

Вид

 <body>            
    <div id="main"></div>
    <script>
        let data = {!! $data->toJson() !!};
    </script>
    <script src="{{asset('js/app.js')}}" ></script>                
</body>

Использование внутри компонента

 upload() {
    var compiler = new Compiler(this.props.engine);
    var compiled = compiler.compile();
    $.ajax({
        type: "POST",
        beforeSend: function(request) {
            request.setRequestHeader("stimpack-io-token", data.stimpack_io_token);
        },

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

1. Эй, я пробовал этот метод, но он выдает неопределенную переменную GlobalData.

2. Я отформатировал код следующим образом: <script> пусть GlobalData = «{!! $GlobalData-> toJSON() !!}»; </script> и общедоступная функция index() { return view(‘welcome’)->с помощью([$GlobalData => collect([ ‘user’ => Auth::user() ]) ]); } Если я закомментирую тег script в корневом файле блейда, ошибки не будет.

3. Хорошее форматирование, я это отредактирую. И вы должны быть хороши, просто замените $ GlobalData на ‘GlobalData’ в вашем контроллере. Видите разницу с моим предоставленным примером, где это строка, а не переменная?

4. Потрясающе! Я предпочитаю независимый от интерфейса код react, используя localStorage для хранения кода аутентификации, но я не знал блейд-решения. Спасибо

5. @Anders Спасибо. Это сработало, как только я разобрался со своими маршрутами. Я могу получить GlobalData на странице просмотра, напечатав {{ $GlobalData }} но когда я ввожу GlobalData в любом из моих компонентов, он говорит undefined. Нужно ли мне передавать это в конструкторе и загружать данные из этой переменной?