Как сделать аутентификацию в Vue JS с помощью Laravel, чтобы пользователь не мог войти на свою страницу с URL без логина - PullRequest
Новая
       25

Как сделать аутентификацию в Vue JS с помощью Laravel, чтобы пользователь не мог войти на свою страницу с URL без логина

0 голосов
/ 24 марта 2020

Пожалуйста, помогите! Я хочу аутентифицировать свое приложение, чтобы пользователь не мог войти через 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'
    },

}

1 Ответ

0 голосов
/ 25 марта 2020

Вы не показываете маршрут / пользователя, поэтому мы не можем показать вам точное изменение, которое вам нужно. Тем не менее, вам нужно применить промежуточное ПО auth к этому маршруту. Что-то вроде этого - то, что вы хотите:

Вам, конечно, нужно обновить пространство имен и имена контроллеров 

Route::group([
    'middleware' => ['web','auth'],  // <---- note the auth middleware here 
    'namespace'  => 'App\Http\Controllers',
],
    static function () {
        Route::get('/users', 'UserController@render')->name('users');
    }
);
...