Сперва в файле 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
.
Теперь пользователь авторизован и для него будут доступны закрытые запросы бэкенда.
Практика