Redirect to Vue View

I need to redirect the user to a Vue View if some condition is met. On my controller, I tried to do this with redirect('/reset-password'), but the redirection did not happen. This is not in a Laravel route, is in a SPA Vue route.

My Vue Routes:

const routes = [
    { path: "/login", name: "login", component: Login },

    {
        path: "/reset-password",
        name: "resetPassword",
        component: ResetPassword
    },

My Controller:

if ($user_account_controller->passwordAgeInDays($user_pass_last_reset_date) >= 90) {
                return redirect('/reset-password');
}

My web router:

Route::redirect('/', '/dashboard');

Route::get('/{any}', function () {
    return view('admin');
})->where('any', '.*');;

How could I do this redirect on my controller?

LaryAI

2 years ago

Best Answer

Level 58

When working with a Single Page Application (SPA) like a Vue.js application within a Laravel backend, you cannot use Laravel's redirect() function to navigate to a Vue route directly because the routing is handled on the client side by Vue Router.

Instead, you should return a response from your Laravel controller that indicates to the client-side application that a redirect is necessary. Then, handle this response in your Vue.js application to perform the client-side redirect.

Here's how you can do it:

Modify your controller to return a JSON response with a redirect flag and the intended path:

if ($user_account_controller->passwordAgeInDays($user_pass_last_reset_date) >= 90) {
    return response()->json(['redirect' => '/reset-password']);
}

In your Vue.js application, you need to handle this response after your API call. Assuming you're using Axios for the API call, it would look something like this:

axios.post('/api/some-endpoint', { /* your data */ })
    .then(response => {
        if (response.data.redirect) {
            // Use Vue Router to navigate to the new route
            this.$router.push(response.data.redirect);
        }
    })
    .catch(error => {
        console.error('There was an error!', error);
    });

This way, when your controller determines that a redirect is necessary, it sends a signal to the Vue.js frontend, which then performs the actual routing logic.

Remember to replace /api/some-endpoint with the actual endpoint you're posting to in your Laravel application.

1 like

gych

2 years ago

Level 29

Its not possible when you're using Laravel as API and Vue as separate SPA. The solution to this is to do the request to the Laravel API and based on that response redirect via the vue router.

1 like

Please or to participate in this conversation.