Дисциплины - Проектирование динамических страниц с помощью фрэймворка Vue.js

Авторизация - Login

Сперва в файле routes/index.js необходимо создать маршрут на компонент с формой логина.

  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/AuthLogin.vue')
  },

Если в базовом шаблоне у нас подключена библиотека Bootstrap, то форма логина можем взять из шаблонов bootstrap-а.

Компонент логина с формой представленной на изображении можно взять по ссылке - https://github.com/mikhalkevich/vue_admin/blob/main/src/views/AuthLogin.vue

Обрабатывает форму следующий скрипт:

import axios from "axios";
export default {
  name: 'AuthLogin',
  data() {
    return {
      email: '',
      password: '' 
    }
  },
  methods: {
    async sendLogin() {
      const {data} = await axios.post(`login`, {
        'email': this.email,
        'password': this.password
      });
      await localStorage.setItem('token', data.token);
      //document.location.href = '/';
      await this.$router.push('/');
    },
  }
}

Необходимые пояснения по скрипту. Заранее объявляем переменные email и password. По нажатию на кнопку login, запускаем асинхронную функцию sendLogin, которая делает асинхронный запрос на бэк и передает туда значение этих переменных. Далее бэкенд должен вернуть токен, который мы помещаем в localstorage<.code>. Таким образом мы запомнили значение токена, который в глобальных настройках axios добавляется к заголовку в bearer.

Теперь пользователь авторизован и для него будут доступны закрытые запросы бэкенда.

Количество комментариев: 0

Для того, чтобы оставить коментарий необходимо зарегистрироваться


Изображения Видео

1. Изображения, стили и файл JSON с данными https://disq.us/url?url=https%3A%2F%2Fgithub.com%2Fdanielkellyio%2Fvue-4-router-course-starter-files%2Farchive%2Frefs%2Fheads%2Fmain.zip%3AVL_V_RMWqj0IZyNcJWGjv4lMY7U&cuid=4942816
2. Bitcoin JSON https://api.coindesk.com/v1/bpi/currentprice.json
3. Vue-router https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
4. Vue 3 by Example https://github.com/PacktPublishing/-Vue.js-3-By-Example
5. Vue3 example https://github.com/mikhalkevich/vue_course
6. Vue_admin https://github.com/mikhalkevich/vue_admin
7. VueAxiosProject https://github.com/mikhalkevich/VueAxiosProject