vue3实现当前页没登陆返回登陆页面后登陆完成在回到之前的页面

Vue 3 中实现未登录用户跳转到登录页面，并在登录完成后返回到原页面的功能，可以通过路由守卫（Router Guards）来实现。Vue Router 提供了导航守卫（navigation guards），允许你在跳转到路由之前进行逻辑处理。

以下是使用 Vue 3 和 Vue Router 实现该功能的一个基本步骤：

1. **设置路由守卫**：在 Vue Router 配置中为需要保护的路由添加全局前置守卫（beforeEach）。这个守卫会在路由发生变化时触发。

2. **判断用户登录状态**：在全局前置守卫中，你可以通过检查本地存储（如 `localStorage`）、Vuex 状态管理或者发起 API 请求来判断用户是否已经登录。

3. **跳转到登录页面**：如果用户未登录，重定向用户到登录页面。可以在全局守卫中使用 `next` 函数来控制路由跳转。

4. **保存目标路由**：在跳转到登录页面之前，可以将目标路由保存到本地存储或者通过其他方式传递给登录组件，以便登录成功后能够返回到原来的页面。

5. **登录成功后返回原页面**：在登录组件中，当用户登录成功后，读取之前保存的目标路由，并使用 `router.push` 方法重定向回原页面。

示例代码如下：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查目标路由是否需要登录
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const isAuthenticated = store.getters.isAuthenticated; // 假设Vuex中有一个isAuthenticated状态

  if (requiresAuth && !isAuthenticated) {
    // 如果用户未登录，保存目标路由并跳转到登录页面
    localStorage.setItem('redirectPath', to.fullPath);
    next({ name: 'login' });
  } else {
    // 如果用户已登录，或者不需要登录，正常跳转
    next();
  }
});

app.use(router);
app.use(store);
app.mount('#app');

在登录成功后，你可以在登录组件的逻辑中添加代码来处理返回操作：

// Login.vue
// 假设登录成功后会调用一个名为 handleLogin 的方法
methods: {
  handleLogin() {
    // 登录逻辑...
    // 登录成功后，读取之前保存的路由并跳转
    const redirectPath = localStorage.getItem('redirectPath') || '/';
    router.push(redirectPath);
  }
}