Redirect after login

@Elliot_putt Thank you but I have tested InertiaJS with my project, and I think it's not so well adapted for my project, because I need many dynamic contents. I will perhaps try to migrate it to InertiaJS later, but for now it will be much more efficient to find a solution to my issue ;).

@MaverickChan Just tested, but it doesn't work.

@vincent15000 you need to use this with your route guard together assuming you are using vue-router , put these codes in your routes file or after import router in app.js

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!localStorage.getItem('blog_accessToken')) {
            next({
                path: '/login',
                query: { 
                    redirectedFrom: to.fullPath 
                }
            })
        } else {
            next()
        }
    } else {
        next()
    }
})

@MaverickChan That's not better ...

@vincent15000

better show some login codes. My codes works totally fine , but you still cannot just copy & paste.

@MaverickChan Sure.

// Axios base configuration

const api = axios.create({
  baseURL: 'http://localhost:8000',
  withCredentials: true
})

...

// apiAuth.js

import axios from 'axios'
import store from '../store'
import { api } from '@/services/axios.js'

export default {

	async login(user) {
		await api.get('/sanctum/csrf-cookie')
	    await api.post('/login', { email: user.email, password: user.password })
	    let response = await api.get('/api/user')
	    return response.data
	},

	async isAuthenticated() {
		let response = await api.get('/authenticated')
	    return response.data == 1
	},

	async logout() {
		await api.post('/logout')
	}

}

...

// auth.js store module

async login({commit, dispatch}, user) {
	await apiAuth.login(user)
	await dispatch('getAuthenticated')
	await dispatch('getMenu')
},

...

// Login.vue methods

methods: {
  login() {
    this.$store.dispatch('auth/login', this.user)
    this.$router.push(route.query.redirectedFrom || '/')
  }
}

Tell me if you need to see more ;).

@MaverickChan I have changed the redirection code like this.

this.$router.push({ path: '/' })

Now the first menu item is selected (for all redirection routes), but the corresponding component is not loaded, so that the login form remains visible again. In fact the behavior is exactly the same whatever route I redirect to.

@vincent15000 what is your Vue version ? vue 2 redirect is another story

this.$router.push(this.$route.query.redirect || '/')

@MaverickChan VuejS v3, I test this right now.

I obtain this URL in the browser and the redirection doesn't work.

http://localhost:8080/login?redirectedFrom=/

@MaverickChan I don't really know why it doesn't work, but I just succeeded and it works with a redirection to another route than the base URL.