使用路由守卫判断登录状态

在前端应用中，可以使用路由守卫来判断用户的登录状态。当用户试图访问需要登录才能访问的页面时，可以通过路由守卫检查用户是否已经登录。如果用户未登录，则可以将其重定向到登录页面，或者提示用户需要先登录才能继续访问。

在 Vue.js 应用中，可以使用 Vue Router 提供的路由守卫功能来实现登录状态的检查。具体实现步骤如下：

1. 在路由配置中定义需要进行登录状态检查的路由，例如：

const routes = [
  { 
    path: '/home', 
    component: Home,
    meta: { requiresAuth: true } // 添加 requiresAuth 属性
  },
  // ...
];

2. 在路由配置中添加全局前置守卫，检查路由的 meta 属性中是否存在 requiresAuth 属性，如果存在则检查用户是否已经登录：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) { // 检查路由的 meta 属性中是否存在 requiresAuth 属性
    if (!isAuthenticated()) { // 检查用户是否已经登录
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将用户重定向到登录页面，并在 query 参数中记录原始访问路径
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

3. 实现 isAuthenticated() 方法，用于检查用户是否已经登录。该方法可以从 Vuex 存储中获取登录状态，或者从后端接口中获取登录状态。

function isAuthenticated() {
  const loggedInUser = store.getters.getLoggedInUser;
  return loggedInUser !== null; // 检查是否存在已登录用户
}

通过使用路由守卫来判断登录状态，可以有效地保护需要登录才能访问的页面，并提高应用的安全性。