Vue项目中实现用户登录后跳回原地址

本地存储

在 Vue 3 中，你可以使用 Vue Router 和 sessionStorage 或 localStorage 来实现用户登录后跳回原来的页面。以下是一种常见的实现方式：

1. 在用户登录之前，记录当前页面的路由路径：

• 在需要登录的页面组件中，在用户点击登录前，使用 ​​this.$route.path​​ 获取当前页面的路由路径，并将其存储在 sessionStorage 或 localStorage 中（选择其中一个根据你的需求）。

// 在需要登录的页面组件中methods: {login() {sessionStorage.setItem('redirectPath', this.$route.path);// 执行用户登录操作}}

1. 在用户登录成功后，跳转回原来的页面：

• 在登录成功后的处理逻辑中，从 sessionStorage 或 localStorage 中获取之前存储的路由路径。
• 利用 Vue Router 的 ​​router.push()​​ 方法将用户重定向到之前的页面。

// 在登录成功后的处理逻辑中const redirectPath = sessionStorage.getItem('redirectPath');if (redirectPath) {sessionStorage.removeItem('redirectPath');router.push(redirectPath);} else {// 如果没有之前的路由路径，跳转到默认页面router.push('/');}

通过上述步骤，你可以实现用户登录完成后跳回原来的页面。

需要注意的是，sessionStorage 仅在当前会话期间有效，而 localStorage 在关闭浏览器后依然有效。根据你的需求选择适合的存储方式。

Store方式

除了使用 sessionStorage 或 localStorage 以外，你还可以使用 Vue Router 的路由导航守卫（Navigation Guards）来实现用户登录后跳回原来的页面。以下是一种使用路由导航守卫的方式：

1. 创建一个全局的路由导航守卫：

• 在你的路由配置文件中，创建一个全局的 ​​beforeEach​​ 导航守卫。
• 在导航守卫中，检查用户是否已经登录。如果用户未登录，则将当前路由路径存储在 Vuex 状态管理中（或者其他全局状态管理方式）。

// 路由配置文件中import store from './store';router.beforeEach((to, from, next) => {const isAuthenticated = store.getters.isAuthenticated;if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {store.commit('setRedirectPath', to.fullPath);next('/login');} else {next();}});

1. 在用户登录成功后，获取存储的重定向路径并跳转：

• 在用户登录成功的处理逻辑中，从 Vuex 状态管理中获取之前存储的重定向路径。
• 利用 Vue Router 的 ​​router.push()​​ 方法将用户重定向到之前的页面。

// 在登录成功后的处理逻辑中const redirectPath = store.state.redirectPath;if (redirectPath) {store.commit('clearRedirectPath');router.push(redirectPath);} else {// 如果没有之前的重定向路径，跳转到默认页面router.push('/');}

1. 在 Vuex 状态管理中存储重定向路径：

• 创建一个名为 redirectPath 的状态，并提供相应的 mutation 和 action 来设置和清除该状态。

// Vuex 状态管理中const state = {redirectPath: ''};const mutations = {setRedirectPath(state, path) {state.redirectPath = path;},clearRedirectPath(state) {state.redirectPath = '';}};const actions = {setRedirectPath({ commit }, path) {commit('setRedirectPath', path);},clearRedirectPath({ commit }) {commit('clearRedirectPath');}};

通过上述方式，你可以使用路由导航守卫和全局状态管理来实现用户登录完成后跳回原来的页面。

URL地址栏方式

还有一种方式是使用 URL 参数来传递重定向路径。以下是使用 URL 参数的实现方式：

1. 在用户登录之前，将当前页面的路由路径作为参数附加到登录链接上：

• 在需要登录的页面组件中，获取当前页面的路由路径，并将其作为参数附加到登录链接上。

   // 在需要登录的页面组件中methods: {login() {const redirectPath = this.$route.path;// 将 redirectPath 作为参数附加到登录链接上window.location.href = `/login?redirect=${encodeURIComponent(redirectPath)}`;}}

1. 在用户登录成功后，从 URL 参数中获取重定向路径并跳转：

• 在登录成功后的处理逻辑中，从 URL 参数中获取之前附加的重定向路径。
• 利用 Vue Router 的 ​​router.push()​​ 方法将用户重定向到之前的页面。

   // 在登录成功后的处理逻辑中const urlParams = new URLSearchParams(window.location.search);const redirectPath = urlParams.get('redirect');if (redirectPath) {// 将重定向路径解码后再进行跳转router.push(decodeURIComponent(redirectPath));} else {// 如果没有之前的重定向路径，跳转到默认页面router.push('/');}

通过使用 URL 参数来传递重定向路径，你可以实现用户登录完成后跳回原来的页面。

需要注意的是，这种方式需要在后端进行对登录链接的处理，以获取和解析 URL 参数。同时，为了安全考虑，你可能需要对重定向的 URL 参数进行验证和过滤，以防止恶意操作。