Для осуществления процесса авторизации с использованием Vue (клиентская часть) и PHP (серверная часть), необходимо выполнить несколько шагов:
### Шаг 1: Серверная часть (PHP)
1. **Создайте точку входа для авторизации** (например, `login.php`), которая будет обрабатывать запросы на авторизацию.
```php
<?php
header('Content-Type: application/json');
$credentials = json_decode(file_get_contents('php://input'), true);
$username = $credentials['username'];
$password = $credentials['password'];
// Здесь вы должны проверить учетные данные (например, по базе данных)
if ($username === 'admin' && $password === 'password') {
echo json_encode(['access' => true]);
} else {
echo json_encode(['access' => false]);
}
?>
```
### Шаг 2: Клиентская часть (Vue)
1. **Установите Vue Router**:
Убедитесь, что у вас установлен Vue Router, если он еще не установлен.
```bash
npm install vue-router
```
2. **Создайте форму входа** в вашем компоненте Vue:
```vue
<template>
<div>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
const response = await fetch('http://yourdomain.com/login.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
});
const data = await response.json();
if (data.access) {
// Успешная авторизация, сохраняем токен или статус авторизации
localStorage.setItem('isAuthenticated', true);
// Перенаправление на защищенную страницу
this.$router.push('/protected');
} else {
alert('Неверные учетные данные!');
}
}
}
};
</script>
```
### Шаг 3: Настройка Vue Router для защиты маршрутов
3. **Создайте защищенные маршруты** в вашем `router.js` или аналогичном файле. Для этого проверьте статус авторизации пользователя перед доступом к маршруту.
```javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import Login from './components/Login.vue';
import Protected from './components/Protected.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/protected', component: Protected, meta: { requiresAuth: true } }
]
});
// Глобальная проверка маршрутов для защищенных страниц
router.beforeEach((to, from, next) => {
const isAuthenticated = !!localStorage.getItem('isAuthenticated');
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next({
path: '/login',
query: { redirect: to.fullPath } // Запомнить, куда перенаправить после авторизации
});
} else {
next();
}
});
export default router;
```
### Шаг 4: Защита компонентов
4. **Создайте защищенный компонент** в соответствии с маршрутом `/protected`.
```vue
<template>
<div>
<h1>Защищенный контент</h1>
<p>Вы видите это, потому что вы авторизованы.</p>
</div>
</template>
<script>
export default {
// Логика компонента
};
</script>
```
### Заключение
Таким образом, у вас есть базовый механизм авторизации с использованием Vue и PHP. На серверной стороне производится проверка учетных данных, а на клиентской стороне — обработка ответа для управления маршрутизацией и защищенными страницами.