模仿Gitee实现站外链接跳转时进行确认

概述

如Gitee等网站，在有外部链接的时候如果不是同域则会出现一个确认页面。本文就带你看看这个功能应该如何实现。

效果

实现

1. 实现思路

将打开链接作为参数传递给一个中间页面，在页面加载的时候判断链接的域名和当前网站是否同域，同域则直接跳转，如果不同域，则展示确认页面进行在此确认。如下为跳转页面。

复制代码

http://localhost:3001/#/link?target=https://www.baidu.com

2. 实现代码

vue 复制代码

<template>
    <div class="layout-main">
      <div class="layout-box">
        <p>即将跳转到外部网站</p>
        <p>您将要访问的链接不属于{{ local }}，请关注您的账号安全。</p>
        <p>{{ target }}</p>
        <p>
          <el-button type="warning" @click="goto">继续前往</el-button>
        </p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    computed: {
      isSameDomain() {
        const host = this.local
        const targetHost = new URL(this.target).host
        return host === targetHost
      },
      target() {
        return this.$route.query.target
      },
      local() {
        return window.location.host
      }
    },
    created() {
      if(this.isSameDomain) window.location.href = this.target
    },
    methods: {
      goto() {
        window.location.href = this.target
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  $size: 38rem;
  
  .layout-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #efefef;
    padding: 0 calc(50% - $size / 2);
    h3 {
      width: $size;
      text-align: center;
      font-size: 1.8rem;
      margin: 0.5rem 0;
    }
    .layout-box {
      background-color: #ffffff;
      width: $size;
      border-radius: 0.4rem;
      box-shadow: 0.1rem 0.1rem 0.4rem #ccc;
      padding: 1.5rem;
      p {
        margin: 0;
        line-height:2;
        &:first-child {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          line-height: 1;
        }
        &:last-child {
          text-align: right;
        }
      }
    }
  }
  </style>
``