Знакомство с админкой

Логика авторизации

<template>
  <div class="min-vh-100 d-flex flex-column">
    <app-navbar />
    <b-container class="flex-grow-1">
      <-- вот наш компонент авторизации -->
      <app-login />
      <-- содержимое страницы выводится только авторизованным юзерам -->
      <nuxt v-if="$auth.loggedIn" class="pt-5" />
    </b-container>
    <app-footer />
  </div>
</template>

<b-modal
    :visible="!$auth.loggedIn" // Показывать только гостям
    :title="$t('security.login')" // Заголовок берётся из лексиконов (про них позже)
    no-close-on-backdrop // Не закрывать при клике на фон
    no-close-on-esc    // Не закрывать при нажатии на Esc
    hide-header-close // Не выводить вообще кнопку закрытия
>
// ...
</b-modal>

// Отправка формы на сервер
async submit() {
  // при начале авторизации выставляем переменную, которую можно 
  // использовать для блокировки формы
  this.loading = true
  try {
    // Вызываем метод авторизации из $auth с данными формы
    await this.$auth.loginWith('local', {data: this.login})
    // Если всё хорошо - вывод сообщения об успехе
    await this.$toast.info(String(this.$t('security.greetings')))
    // Очистка формы
    this.onReset()
  } catch (err) {
    // Если ошибка - пишем в консоль
    console.error(err)
  } finally {
    // Но в любом случае после запроса убираем флаг загрузки
    this.loading = false
  }
},
// Обнудение полей формы авторизации
onReset() {
  this.login = {
    username: '',
    password: '',
  }
},

if (this.$auth.loggedIn) {
    console.log(this.$auth.user.username)
} else {
    console.error('No user!')
}

Разделы админки

user/
    profile.vue - изменение профиля текущего юзера, /admin/user/profile
users/ 
    edit/
        _id.vue - редактирование юзера, /admin/users/edit/id-юзера
    roles/ 
        edit/
            _id.vue - редактирование группы юзеров, /admin/users/roles/edit/id-роли
        create.vue - создание группы юзера, /admin/users/roles/create
    create.vue - создание нового юзера, /admin/users/create
    roles.vue - просмотр всех групп юзеров, /admin/users/roles
index.vue - корневая страница админки с главным меню, /admin/
users.vue  - просмотр всех пользователей, /admin/users

Минутка практики

<template>
    <div>Hello, world!</div>
</template>

<script>
export default {
    name: 'TestPage',
}
</script>

export default [
   // наш новый раздел
  {
    name: 'test', // имя маршрута, его можно взять в DevTools
    title: 'Test', // название для вывода в меню
    scope: null, // Требуемое разрешение, мы ничего не требуем
  },
  {
    name: 'users',
    // ... оставляем что там есть по умолчанию
  },
]

Заключение