如何基于当前页面编写If语句？实现页面访问限制跳转

Hey there! 既然你已经搞定了登录状态校验，那咱们只需要聚焦在页面访问限制+自动跳转这部分逻辑就行，我给你拆解成简单的步骤，代码示例也安排上：

核心思路 #

先获取当前页面的路径/标识，再结合你已有的登录状态，用if判断实现：如果已登录但不在指定页面，就自动跳转到目标页面；如果是未登录用户试图访问受限页面，也可以补充跳转逻辑（不过你说登录校验已完成，咱们重点放在前者）。

原生JS场景（静态页面/无框架） #

直接用浏览器的window.location对象来获取当前页面路径，然后写判断：

// 替换成你要限制的目标页面路径
const targetPage = "/dashboard";
// 你已经完成的登录状态校验结果，true = 已登录
const isLoggedIn = true; // 这里替换成你实际的登录状态判断逻辑

// 获取当前页面的路径（比如当前页面是"/home"，currentPath就是"/home"）
const currentPath = window.location.pathname;

// 核心if判断逻辑：已登录且不在目标页面 → 强制跳转
if (isLoggedIn && currentPath !== targetPage) {
  window.location.href = targetPage;
}

// 额外补充：如果要防止未登录用户访问目标页面（可选）
if (!isLoggedIn && currentPath === targetPage) {
  window.location.href = "/login"; // 跳转到登录页
}

框架场景补充（Vue/React） #

如果是单页应用，用框架自带的路由守卫/钩子来实现更优雅：

Vue项目（路由守卫） #

在router/index.js里添加全局前置守卫：

import router from './router';

// 假设你有全局的登录状态，比如从Vuex/localStorage获取
const getIsLoggedIn = () => {
  return localStorage.getItem('token') !== null; // 替换成你的实际校验逻辑
};

router.beforeEach((to, from, next) => {
  const targetPage = "/protected-page";
  const isLoggedIn = getIsLoggedIn();

  if (isLoggedIn && to.path !== targetPage) {
    next(targetPage); // 跳转到指定页面
  } else {
    next(); // 正常放行
  }
});

React项目（useEffect + 路由钩子） #

在根组件或者路由配置里使用useEffect监听路由变化：

import { useLocation, useNavigate } from "react-router-dom";

function App() {
  const location = useLocation();
  const navigate = useNavigate();
  const isLoggedIn = localStorage.getItem('token') !== null; // 你的登录状态判断
  const targetPage = "/protected-page";

  useEffect(() => {
    // 已登录但不在目标页面 → 跳转
    if (isLoggedIn && location.pathname !== targetPage) {
      navigate(targetPage);
    }
  }, [isLoggedIn, location.pathname, navigate]);

  // 组件渲染内容...
  return <div>Your App Content</div>;
}

注意点 #

• 路径匹配要准确：如果你的页面带有哈希（比如/#/dashboard），记得用window.location.hash来获取，而不是pathname；
• 避免无限跳转：确保目标页面本身不会触发同样的判断逻辑，比如在目标页面里不要加这段代码，或者在判断里排除自身；
• 登录状态要可靠：确保isLoggedIn是经过严格校验的（比如从后端接口验证，而不是只看前端存储）。

内容的提问来源于stack exchange，提问作者Cole