首页导航跳转功能深度解析-系统内和系统外

首页导航跳转功能分析

一、露天积水矿坑跳转

1.1 入口定义

<!-- src/views/homepage/homepage.vue -->
<div class="menu-item" @click="gotoopenPitStopeArrangement(1064)">
  露天积水矿坑
</div>

1.2 跳转实现

// src/views/homepage/homepage.vue - gotoopenPitStopeArrangement
gotoopenPitStopeArrangement(command) {
  // 1. 权限检查：验证是否有权限访问积水矿坑模块
  if (!this.waterStagnantPit) {
    this.$message({
      type: 'error',
      message: '您没有权限访问',
    });
    return;
  }
  
  // 2. Token 验证
  let token = localStorage.getItem('token');
  if (!token) {
    // Token不存在，跳转登录页
    this.$router.replace('/login');
    return;
  }
  
  // 3. 构造跳转URL
  let url = $g.webUrl + '/consult/Home?menu=' + command + '&token=' + token;
  
  // 4. 打开新窗口
  try {
    let newWindow = window.open(url, '_blank');
    // 检查新窗口是否成功打开（防止弹窗拦截）
    if (!newWindow) {
      throw new Error('无法打开新窗口。');
    }
  } catch (e) {
    // 处理弹窗被拦截的情况（静默处理）
  }
}

1.3 权限控制

权限状态来源：

data() {
  return {
    // 能否进入积水矿坑
    waterStagnantPit: false
  };
}

权限获取时机： 在组件初始化时通过 API 获取用户权限，设置 waterStagnantPit 字段。

1.4 跳转流程

用户点击"露天积水矿坑"
    ↓
检查 waterStagnantPit 权限
    ↓
├── 无权限 → 提示"您没有权限访问"
└── 有权限 → 继续
    ↓
检查 localStorage 中的 token
    ↓
├── token不存在 → 跳转登录页
└── token存在 → 继续
    ↓
构造 URL: $g.webUrl + '/consult/Home?menu=1064&token=xxx'
    ↓
window.open(url, '_blank') 打开新窗口

---

二、智能监控跳转

2.1 入口定义

<!-- src/views/homepage/homepage.vue -->
<el-popover placement="bottom" trigger="hover">
  <span slot="reference">智能监控</span>
  <div class="mouse_wrap">
    <span @click="gotorealTimeMonitoring(576)">电量监控</span>
    <span @click="gotorealTimeMonitoring(0)">视频监控</span>
  </div>
</el-popover>

2.2 跳转实现

// src/views/homepage/homepage.vue - gotorealTimeMonitoring
gotorealTimeMonitoring(command) {
  // 1. Token 验证
  let token = localStorage.getItem('token');
  if (!token) {
    this.$router.replace('/login');
    return;
  }
  
  // 2. 特殊处理：电子围栏监控需要生成 JWT Token
  let Jwttoken = null;
  if (command === 'dzwl') {
    const adcode = localStorage.getItem('adcode');
    const jwt = require('jsonwebtoken');
    
    // JWT Header
    const header = { alg: 'HS256', typ: 'JWT' };
    
    // JWT Payload
    const payload = {
      code: adcode,           // 行政区编码
      userName: this.nickName, // 用户昵称
      userLevel: this.regionLevel // 用户级别
    };
    
    // 生成 JWT Token
    const secret = 'secretKey';
    Jwttoken = jwt.sign(payload, secret, {
      algorithm: 'HS256',
      header: header
    });
  }
  
  // 3. 命令映射表
  const commandMap = {
    0: { 
      type: 'route', 
      path: '/videoSurveillance/realTimeMonitoring' 
    },
    576: {
      type: 'url',
      url: `${$g.webUrl}/consult/consultHome?menu=576&token=${token}`
    },
    709: {
      type: 'url',
      url: `${$g.webUrl}/consult/consultHome?menu=${command}&token=${token}`
    },
    757: {
      type: 'url',
      url: `${$g.webUrl}/consult/consultHome?menu=${command}&token=${token}`
    },
    dzwl: {
      type: 'url',
      url: `http://ip:port/home?token=${Jwttoken}`
    },
    tssd: {
      type: 'url',
      url: `http://xxxx`
    }
  };
  
  // 4. 执行跳转
  const commandInfo = commandMap[command];
  if (commandInfo) {
    if (commandInfo.type === 'route') {
      // Vue Router 路由跳转（新窗口）
      const routeUrl = this.$router.resolve({ path: commandInfo.path });
      window.open(routeUrl.href, '_blank');
    } else if (commandInfo.type === 'url') {
      // 外部 URL 跳转
      window.open(commandInfo.url, '_blank');
    }
  } else {
    this.$message.warning('此模块正在开发中');
  }
}

2.3 命令映射表

命令参数	功能名称	跳转类型	目标地址
0	视频监控	route	/videoSurveillance/realTimeMonitoring
576	电量监控	url	$g.webUrl/consult/consultHome?menu=576&token=xxx
'dzwl'	电子围栏监控	url	http://ip:port/home?token=JWT

2.4 JWT Token 生成（电子围栏专用）

// 仅 command === 'dzwl' 时执行
const jwt = require('jsonwebtoken');

const header = { alg: 'HS256', typ: 'JWT' };
const payload = {
  code: adcode,           // 行政区编码
  userName: this.nickName,
  userLevel: this.regionLevel
};
const secret = 'secretKey';

Jwttoken = jwt.sign(payload, secret, {
  algorithm: 'HS256',
  header: header
});

2.5 权限控制（唐山市试点）

<span v-show="authorizationServices.tsssd" @click="gotorealTimeMonitoring('tssd')">
  唐山市试点
</span>

通过 authorizationServices.tsssd 控制是否显示该菜单。

2.6 跳转流程

用户点击智能监控子菜单
    ↓
检查 localStorage 中的 token
    ↓
├── token不存在 → 跳转登录页
└── token存在 → 继续
    ↓
判断命令类型
    ↓
├── command === 'dzwl' → 生成 JWT Token
└── 其他 → 直接使用原有 token
    ↓
查询 commandMap 获取跳转信息
    ↓
├── type === 'route' → Vue Router 解析路径 → window.open
├── type === 'url' → 直接 window.open
└── 无匹配 → 提示"此模块正在开发中"

---

三、两种跳转方式对比

3.1 Route 跳转（Vue Router）

const routeUrl = this.$router.resolve({ path: commandInfo.path });
window.open(routeUrl.href, '_blank');

特点：

• 使用 Vue Router 解析路径
• 在当前项目内跳转
• 可以共享 Vue 实例和状态
• 适用于项目内部路由

3.2 URL 跳转（外部系统）

window.open(commandInfo.url, '_blank');

特点：

• 直接打开外部 URL
• 无法共享状态
• 需要通过 URL 参数传递认证信息（token）
• 适用于外部系统或子系统

---

四、Token 传递机制

4.1 普通 Token 传递

let token = localStorage.getItem('token');
let url = $g.webUrl + '/consult/Home?menu=' + command + '&token=' + token;

4.2 JWT Token 传递（电子围栏专用）

// 生成 JWT
const payload = { code, userName, userLevel };
Jwttoken = jwt.sign(payload, 'secretKey', { algorithm: 'HS256' });

// 传递
url: `http://121.28.213.186:8893/home?token=${Jwttoken}`

---

五、安全考虑

5.1 Token 验证

所有跳转前都会检查 Token 是否存在：

let token = localStorage.getItem('token');
if (!token) {
  this.$router.replace('/login');
  return;
}

5.2 权限检查

• 露天积水矿坑 ：检查 waterStagnantPit 权限标志
• 唐山市试点 ：检查 authorizationServices.tsssd 权限标志

5.3 弹窗拦截处理

try {
  let newWindow = window.open(url, '_blank');
  if (!newWindow) {
    throw new Error('无法打开新窗口。');
  }
} catch (e) {
  // 静默处理，避免影响用户体验
}