Angular条件路由实现：不同权限用户点击同按钮跳转不同页面

前端判断跳转（适合单页应用/前后端分离场景） #

核心思路是前端存储用户权限标识（比如localStorage、全局状态管理工具），点击按钮时根据权限判断目标页面后执行跳转。

原生JavaScript示例

// 假设用户权限已存在localStorage，键为userRole
document.getElementById('common-nav-btn').addEventListener('click', () => {
  const userRole = localStorage.getItem('userRole');
  if (userRole === 'privileged') {
    window.location.href = '/privileged-dashboard';
  } else if (userRole === 'non-privileged') {
    window.location.href = '/user-center';
  }
});

Vue项目示例（结合Vue Router）

<template>
  <button @click="handleCommonBtnClick">共用功能按钮</button>
</template>

<script>
export default {
  methods: {
    handleCommonBtnClick() {
      // 从Vuex全局状态获取用户角色
      const userRole = this.$store.state.currentUser.role;
      this.$router.push(userRole === 'privileged' ? '/privileged' : '/non-privileged');
    }
  }
}
</script>

后端渲染/接口跳转（适合服务端渲染/高权限校验场景） #

这种方式安全性更高，权限判断逻辑在后端，前端无法篡改。

服务端模板渲染示例（以EJS为例）

后端渲染页面时，直接根据用户权限生成按钮的跳转链接：

<% if (currentUser.role === 'privileged') { %>
  <a href="/admin-panel" class="nav-btn">共用按钮</a>
<% } else { %>
  <a href="/user-home" class="nav-btn">共用按钮</a>
<% } %>

后端跳转接口示例（以Express为例）

前端按钮点击后请求后端接口，后端根据用户权限重定向到对应页面：

// 后端接口
app.get('/common-redirect', (req, res) => {
  // 假设已通过会话/JWT获取当前用户权限
  const userRole = req.session.user.role;
  const targetUrl = userRole === 'privileged' ? '/privileged-page' : '/non-privileged-page';
  res.redirect(targetUrl);
});

前端按钮绑定跳转逻辑：

document.getElementById('common-nav-btn').addEventListener('click', () => {
  window.location.href = '/common-redirect';
});

关键注意事项 #

• 无论采用哪种方案，后端必须对目标页面做权限校验，防止用户直接通过URL访问无权限页面。
• 前端存储的权限标识仅用于交互逻辑，不能作为权限判断的唯一依据，必须依赖后端的认证校验。

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