如何在 Vue JS 中使用 Laravel 进行身份验证，以便用户在没有登录的情况下无法从 URL 进入他的页面

Posted 2023-02-22

【中文标题】如何在 Vue JS 中使用 Laravel 进行身份验证，以便用户在没有登录的情况下无法从 URL 进入他的页面

【英文标题】：How do authentication in Vue JS with Laravel so that user cannot enter in his page from URL without login

【发布时间】：2020-07-05 04:30:28

【问题描述】：

请帮忙！我想对我的应用程序进行身份验证，以便用户在没有登录的情况下无法通过浏览器中的 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>

app.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'
    ,

【问题讨论】：

不清楚您的确切意思，也没有显示您的任何路线。也就是说，如果希望特定路由只允许经过身份验证的用户访问，您可以将“auth”中间件添加到该路由，如果未经身份验证的用户导航到该 URL，Laravel 会自动将他们重定向回登录页面

@WesleySmith，你能再看看我的问题吗？

在浏览器中，当我写这个网址时：127.0.0.1:8000/users，我想将用户推送到登录页面

没错，如果你将 auth 中间件添加到 laravel 中的路由定义中，它就会做到这一点。你能展示你用来创建 /users 路由的代码吗？

@WesleySmith，我唯一的路线是这些：prntscr.com/rm8k6j。对于用户我在登录组件 vue 后重定向它。

【参考方案1】：

您没有显示您的 /users 路线，因此我们无法向您显示您需要的确切更改。也就是说，您需要将 auth 中间件应用于该路由。像这样的东西就是你想要的：

您当然需要更新命名空间和控制器名称

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