Пожалуйста, помогите! Я хочу аутентифицировать свое приложение, чтобы пользователь не мог войти через URL в браузере на панель пользователя без входа в систему, как я могу сделать это в Vue. js и Laravel? Если он напишет URL-адрес следующим образом: http://127.0.0.1: 8000 / users , даже если он не указал свои учетные данные на странице входа в систему
Ниже указан мой код:
AppController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
//use illuminate\Support\Facades\Auth;
use Auth;
use App\User;
use Illuminate\Support\Facades\Hash;
/**vc pode pegar o usuário logado de várias formas, usando Auth::user(), usando helper auth()->user() e também pela request fazendo $request->user(); ou pela fachada da request tb, Request::user(); */
class AppController extends Controller
{
public function init(){
$user = Auth::user();
//$user = auth()->user();
return response()->json(['user' => $user], 200);
}
public function login(Request $request)
{
if (Auth::attempt(['email' => $request->email, 'password' => $request->password], true)) {
return response()->json(Auth::user(), 200);
}
else{
return response()->json(['error' => 'Could not allow you in. Sorry'], 401);
}
}
public function register(Request $request)
{
$user = User::where('email', $request->email)->first();
if (isset($user->id)) {
return response()->json(['error' => 'User already exist.'], 401);
}
$user = new User();
$user->name = $request->name;
$user->email = $request->email;
$user->password = Hash::make($request->password);
$user->save();
Auth::login($user);
return response()->json($user, 200);
}
public function logout()
{
Auth::logout();
}
}
Vue шаблон ВХОД:
<script>
export default {
name: 'login',
props:['app'],
data(){
return {
email: '',
password: '',
errors: [],
}
},
methods: {
onSubmit(){
this.errors = [];
if(!this.email){
this.errors.push('Email is require.');
}
if(!this.password){
this.errors.push('Password is require.');
}
if(!this.errors.length){
const data = {
email : this.email,
password : this.password
}
this.app.req.post('auth/login' , data).then(response => {
this.app.user = response.data;
//this.$eventHub.$emit('onSubmit', this.MainHeader);
this.$router.push('/users');
//this.app.MainHeader = 'main-header';
console.log(this.app.MainHeader);
}).catch(error => {
this.errors.push(error.response.data.error);
});
}
}
}
}
</script>
приложение. js файл
const router = new VueRouter({
//mode: 'history',
routes // short for `routes: routes`
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
});
Маршрутизаторы
path: '/users',
component: Users,
name: 'users',
meta:{requiresAuth:true},
children: [
{
path: 'dashboard',
component: Dashboard,
name: 'dashboard'
},
}