首页 > 解决方案 > 如何在 Vue 中从 Laravel 获取错误?

问题描述

我想在客户端从服务器获取错误,在登录或注册过程中出现问题时显示在页面上,我认为在后端可以,但我不知道为什么它们没有返回。

如何从 Vue 中的验证器获取错误消息?

我正在使用:vuex,vue-router

我用于登录和注册的 vuex 文件

actions: {
        async login({ dispatch }, credentials) {
            
            await axios.post('http://127.0.0.1:8000/api/login', credentials)
            .then( res => {
                if (res.data.success) {
                    // controllo se il token è buono
                    return dispatch('attempt', res.data.token)
                } 
            })
            .catch( err => {
                console.log( err )
            })
        },

        async attempt({ commit, state }, token) {

            // blocco in caso ci fosse o meno il token
            // se c'è il token 
            if (token) {
                commit('SET_TOKEN', token)
            }

            // se non c'è
            if(!state.token) {
                return
            }
            // /blocco in caso ci fosse o meno il token

            // provo a gettare l'user 
            try {
                await axios.get('http://127.0.0.1:8000/api/user')
                    .then(res => {
                        commit('SET_USER', res.data)
                    })
            } catch (e) {
                commit('SET_TOKEN', null)
                commit('SET_USER', null)
            }
        },

        async register({ }, credentials) {
            await axios.post('http://127.0.0.1:8000/api/register', credentials)
            .then( () => {
               
            })
            .catch(err => {
                console.log(err)
            })
        },

        logoutAction({ commit }) {
            return axios.post('http://127.0.0.1:8000/api/logout')
                .then( () => {
                    commit('SET_TOKEN', null)
                    commit('SET_USER', null)
                })
        },

        
    }

我的控制器

public function register(Request $request) {

        $fields = $request->validate(
            [
                'name' => 'required|string',
                'email' => 'required|string|unique:users,email',
                'password' => 'required|string|confirmed'
            ]
        );

        $user = User::create([
            'name' => ucwords($fields['name']),
            'email' => $fields['email'],
            'password' => bcrypt($fields['password']),
        ]);   

        $token = $user->createToken('token')->plainTextToken;

        
        return response()->json(
            [
                'success' => true,
                'user' => $user,
                'token' => $token,
                'message' => 'Registered successfully'
            ], 201);

    }

    public function login(Request $request) {

        $fields = $request->all();

        $validator = Validator::make($fields, [
            'email' => 'required',
            'password' => 'required'
        ]);

        $user = User::where('email', $fields['email'])->first();

        if($validator->fails()) {
            return response()->json([
                'message' => 'You must fill in all the fields!',
                'errors' => $validator->errors()
            ], 401);
        }

        if(!$user || !Hash::check($fields['password'], $user->password)) {
            return response()->json([
                'message' => 'Invalid credentials.',
            ], 401);
        }

        $token = $user->createToken('token')->plainTextToken;

        return response()->json(
            [
                'success' => true,
                'user' => $user,
                'token' => $token,
                'message' => 'Logged in'
            ], 201);

    }

    public function logout(Request $request) {
        auth()->user()->tokens()->delete();

        return response()->json(
            [
                'message' => 'Logged out.'
            ]
        );
    }

此外,如果注册有空字段,我想停止用户,迫使他留在注册路线中,但是使用这些设置,即使没有输入注册字段,用户也会被重定向到登录页面,尽快当我按回车键或单击“注册”时。

ps:我在用户中推送的“主页”路由是带有登录表单的页面。所以我希望只有在完成注册表单后用户才会被重定向到那里。

submitRegistration() {
      this.register(this.form)
        .then(() => {
        

          this.$router.push({name:'home'})
        })
        .catch((err) => {
          // Ignore the vuex err regarding  navigating to the page they are already on.
          if (
            err.name !== "NavigationDuplicated" &&
            !err.message.includes(
              "Avoided redundant navigation to current location"
            )
          ) {
            // But print any other errors to the console
            console.log(err);
          }
        });
    },

标签: laravelvue.jsvuexvue-router

解决方案


推荐阅读