Laravel Vue 身份验证错误 401:未经授权

时间:2021-02-25 17:28:11

标签: laravel vue.js authentication laravel-sanctum

我正在使用 Laravel 制作 API,我正在构建登录系统。当我尝试获取已登录的用户时,当登录似乎有效时,我收到 401 错误。这是我的 vuex 模块,我可以在其中执行登录用户的操作:

import axios from '@/api';

export default {
    namespaced: true,
    state: {
        user: null
    },
    mutations: {
        SET_USER(state, user) {
            state.user = user;
        }
    },
    actions: {
        login({dispatch}, credentials) {
            axios.get('/sanctum/csrf-cookie').then(() => {
                axios.post('/api/auth/login', credentials).then(() => {
                    dispatch('getUser');
                });
            });
        },
        getUser({commit}) {
            axios.get('/api/user').then((res) => {
                commit('SET_USER', res.data);
            }).catch((err) => {
                commit('SET_USER', null);
                console.log(err)
            });
        }
    },
}

这是我从模块映射动作和状态的组件:

  <template>
   <div class="login_container">
    <h1 v-if="$store.state['login/user'] != null">
      {{$store.state['login/user'].name}}
    </h1>

    <form @submit.prevent="login(form)" class="login_form">
      <div class="form-group">
        <label for="email">Correo electrónico</label>
        <input type="email" class="login_email" id="email" v-model="form.email">
      </div>
      <div class="form-group">
        <label for="password">Contraseña</label>
        <input type="password" class="login_password" id="password" v-model="form.password">
      </div>
      <div class="form-group">
        <button class="login_submit">Iniciar sesión</button>
      </div>
    </form>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex';

export default {
  name: "Login",
  data() {
    return {
      form: {
        email: '',
        password: ''
      },
      ...mapState('login', ['user'])
    }
  },
  methods: {
    ...mapActions('login', ['login']),
  }
}
</script>

这是我的 Laravel 项目中的 api 路由:

route::group(['middleware' => 'auth:sanctum'], function () {
 route::get('/user', function (Request $request) {
   return $request->user();
  });
});

route::post('/auth/register', [\App\Http\Controllers\AuthController::class, 'register']);
route::post('/auth/login', [\App\Http\Controllers\AuthController::class, 'login']);
route::post('/auth/logout', [\App\Http\Controllers\AuthController::class, 'logout']);

还有我的登录功能:

public function login(Request $request)
{
    $credentials = $request->only('email', 'password');

    if (\Auth::attempt($credentials)) {
        return response(auth()->user());
    } else {
        return response('ERROR');
    }
}

0 个答案:

没有答案