如何结合Axios与express.render()实现带授权头校验的页面渲染？

你遇到的问题本质是浏览器导航请求和AJAX异步请求的核心差异导致的：

原来的<a href="/users">是让浏览器发起一个导航请求，服务器渲染users.html后返回给浏览器，浏览器会自动替换当前页面的所有内容并更新地址栏；而用Axios发起的是AJAX异步请求，服务器返回的users.html内容只是作为响应数据存放在JS里，浏览器不会自动帮你渲染这个页面——这就是为什么请求能被Express接收，但页面毫无变化的原因。

你的需求是在加载新页面前校验授权，同时利用Axios默认携带的授权头，下面给你具体的解决方案：

1. 手动处理Axios响应，更新页面内容 #

当Axios成功获取到服务器返回的users.html后，我们需要手动把返回的HTML内容替换到当前页面，并更新浏览器地址栏的URL，模拟正常跳转的体验：

步骤1：编写页面加载函数 #

function loadUsersPage() {
  // 可选：如果需要在请求前做额外授权校验（比如检查token是否过期）
  // const authToken = localStorage.getItem('authToken');
  // if (!authToken || isTokenExpired(authToken)) {
  //   window.location.href = '/login';
  //   return;
  // }

  axios.get('/users')
    .then(response => {
      // 用服务器返回的HTML替换当前页面的全部内容
      document.documentElement.innerHTML = response.data;
      // 更新地址栏URL，保持路由一致性（刷新页面仍能正常请求/users）
      window.history.pushState({}, 'Users Page', '/users');
    })
    .catch(error => {
      // 处理请求错误，比如授权失败跳转到登录页
      if (error.response?.status === 401) {
        window.location.href = '/login';
      } else {
        console.error('加载用户页面失败:', error);
      }
    });
}

步骤2：修改a标签，阻止默认跳转 #

<a onclick="loadUsersPage(); event.preventDefault();">Users Page</a>

这里的event.preventDefault()是关键，它会阻止a标签默认的导航行为，只执行我们自定义的Axios请求逻辑。

2. 用Axios拦截器统一处理授权校验 #

如果你的应用有很多页面都需要做授权校验，推荐用Axios的请求拦截器统一处理，避免重复写校验逻辑：

// 添加请求拦截器，在所有请求发起前校验授权
axios.interceptors.request.use(
  function(config) {
    // 这里做授权校验逻辑，比如检查本地存储的token
    const authToken = localStorage.getItem('authToken');
    if (!authToken) {
      // 无授权，跳转到登录页
      window.location.href = '/login';
      // 取消当前请求
      return Promise.reject(new Error('未检测到授权信息'));
    }
    // 如果你的Axios默认配置已经携带了授权头，这里无需额外处理
    return config;
  },
  function(error) {
    // 处理请求错误
    return Promise.reject(error);
  }
);

配置完拦截器后，你之前的页面加载函数可以简化，不用每个请求都写校验逻辑，拦截器会自动在请求发起前做检查。

注意事项 #

• 如果服务器返回的users.html是完整的页面（包含<html>、<head>、<body>标签），用document.documentElement.innerHTML替换是没问题的；如果只是页面的部分内容，可以改为替换document.body.innerHTML。
• 用history.pushState()更新URL后，用户刷新页面时，浏览器会正常请求/users路由，你的Express路由已经配置好返回页面，所以不会有问题。
• 如果需要处理浏览器的前进/后退按钮，可以监听popstate事件，重新加载对应页面的内容。

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