В репозитории и некоторых других учебниках вы увидите ссылки на загрузку вошедшего в систему пользователя. Это очень похоже на все, что я изложил для маршрутов наших кафе как на Laravel, так и на JS/Vue. Если вы будете следовать руководствам, я следовал той же функциональности и структуре кода, что и Cafes. Вы можете найти код в репозитории и проверить его.

Одна вещь, которую я хотел бы отметить в файле app/Models/User.php, это то, что я добавил два поля базы данных в массив $hidden в модели пользователя. Это столбцы provider и provider_id. Мы НЕ хотим, чтобы эти данные возвращались, когда мы возвращаем наш объект пользователя в формате JSON для наших маршрутов. По сути, это информация уровня пароля. Массив $hidden должен выглядеть так:

/**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token', 'provider', 'provider_id'
    ];

Обновления входа/выхода

Я добавил в макет несколько стилей: login.blade.php. Ничего особенно важного, просто это выглядит лучше. Я добавил маршрут в наш файл routes/web.php для выхода из системы:

Route::get( '/logout', 'Web\AppController@getLogout' )
      ->name('logout');

Затем я реализовал метод выхода из системы здесь:

public function getLogout(){
        Auth::logout();
        return redirect('/login');
}

Повторное посещение компонента Navigation.vue

Если вы посмотрите на компонент Navigation.vue, я хотел бы указать на несколько вещей.

Первым будет компонент <router-link> в разделе ссылок. Это предоставляется Vue Router для ссылки на другую страницу в одностраничном приложении. Для получения дополнительной информации вы можете просмотреть документы здесь: router-link · vue-router. Это довольно просто, вы добавляете параметры, если это необходимо, и вы можете ссылаться по имени или пути, которые мы определили в файле routes.js. В компоненте Navigation.vue я связываюсь по имени маршрута.

Во-вторых, это строка кода для аватара пользователя:

<img class="avatar" :src="user.avatar" v-show="userLoadStatus == 2"/>

Вы можете видеть, что мы добавили : перед параметром src. Это способ Vue сказать, что мы привяжем локальные данные или вычисляемое свойство к этому параметру. В этом случае вычисляется из Vuex для пользователя. Затем он добавит аватар пользователя после его загрузки. Мы также добавили v-show к userLoadStatus == 2. Это означает, что мы не будем показывать аватар, пока пользователь не завершит загрузку. Типа гладкий!

Приближается

В следующих уроках мы добавим функциональность в наше приложение, включая отправку новых кафе, добавление некоторых функций сопоставления, возможно, сохранение посещенных кафе. Все это можно будет использовать в любом приложении VueJS/Laravel. Как только у нас появятся интересные функции, мы воспользуемся нашими веб-компонентами и создадим мобильное приложение Cordova. Вы будете потрясены тем, насколько переносимы эти компоненты!

Привет! Мы пишем книгу по разработке приложений на основе API. Узнай первым, как только он будет готов! Зарегистрируйтесь здесь: Регистрация для разработки приложений на основе API