原生js实现路由守卫

原生JS实现路由守卫可以通过以下步骤实现：

1. 创建一个路由守卫函数，该函数将在每次路由跳转前执行。可以在该函数中进行登录状态的判断和权限验证。

2. 在路由跳转前，调用路由守卫函数。可以通过监听浏览器的页面跳转事件或使用路由库提供的前置钩子函数实现。

下面是一个简单的示例代码，用于演示原生JS实现路由守卫：

// 定义路由守卫函数
function routerGuard(to, from, next) {
  // 在这里进行登录状态的判断和权限验证
  if (需要登录判断) {
    // 已登录，允许跳转到目标路由
    next();
  } else {
    // 未登录，跳转到登录页面
    window.location.href = '/login';
  }
}

// 监听页面跳转事件，调用路由守卫函数
window.addEventListener('beforeunload', function(event) {
  // 获取目标路由和当前路由
  var to = event.target.href;
  var from = window.location.href;
  
  // 调用路由守卫函数
  routerGuard(to, from, function() {
    // 跳转到目标路由
    window.location.href = to;
  });
});

以上代码是一个简单的示例，实际项目中可能需要根据具体需求进行修改和扩展。