前后端分离的项目如何拦截页面或者过滤页面，请解释并用代码展示

在前后端分离的项目中，前端通常是通过 API 与后端进行数据交互，因此前端的页面拦截或过滤需要在前端代码中实现。以下是一个简单的示例，演示如何在前端拦截页面或过滤页面。

以 Vue.js 为例，我们可以通过路由守卫来实现页面拦截或过滤。路由守卫是一种 Vue.js 提供的机制，用于在路由跳转时拦截路由并进行处理。例如，我们可以在路由守卫中判断用户是否已登录，如果未登录则跳转到登录页面。

以下是一个示例代码：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 判断是否已登录
  const isLogin = localStorage.getItem('isLogin')
  if (to.path === '/login' || isLogin) {
    // 已登录或前往登录页面，放行
    next()
  } else {
    // 未登录，跳转到登录页面
    next('/login')
  }
})

export default router

在上面的代码中，我们使用了 `beforeEach` 路由守卫来判断用户是否已登录。如果用户已登录，则放行路由；否则，跳转到登录页面。

当用户访问 `/` 路径时，会先经过路由守卫进行处理。如果用户已登录，则会跳转到 `Home` 组件；否则，会跳转到 `Login` 组件。

需要注意的是，上述示例代码仅供参考，实际开发中需要根据项目需求进行调整。