免密系统跳转+本地存储+vue注入+子组件form表单校验后父组件提交

一、免密系统跳转：

1、 window.open(URL,name,specs,replace)

URL	可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口
name	可选。指定target属性或窗口的名称。支持以下值： _blank - URL加载到一个新的窗口。这是默认 _parent - URL加载到父框架 _self - URL替换当前页面 _top - URL替换任何可加载的框架集（一般会在同一个新开窗口打开） name - 窗口名称
specs	可选。一个逗号分隔的项目列表。支持以下值：   channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器 fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 height=pixels 窗口的高度。最小.值为100 left=pixels 该窗口的左侧位置 location=yes|no|1|0 是否显示地址字段.默认值是yes menubar=yes|no|1|0 是否显示菜单栏.默认值是yes resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes status=yes|no|1|0 是否要添加一个状态栏.默认值是yes titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes top=pixels 窗口顶部的位置.仅限IE浏览器 width=pixels 窗口的宽度.最小.值为100
replace	Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

跳转页面：

 let url = ''
      //构建竞价中心跳转地址
      jumpToJJ().then(res => {
        // 获取竞价中心登录地址
        url = res?.data.bidding
        if (url != '') {
          // 获取动态令牌
          jumpToBidding(*******).then(res => {
            if (res) {
              window.open(url + '&参数名=' + 参数 + "&令牌=" + 获取的令牌+ "&参数名=" + 参数, '__top')
            } else {
              this.$message.error('获取动态令牌失败！');
            }
          })
        } else {
          this.$message.error('获取地址失败！');
        }
      })

2、window.location属性及方法

window.location属性：

属性	描述
href	完整的 URL
protocol	通信协议，常用的http、ftp、maito等
host（hostname）	主机名或IP地址
port	端口号
pathname	路径，主机上的一个目录或文件地址
search	查询，可有多个参数，用"&“符号隔开，每个参数的名和值用”="符号隔开
hash	信息片断 （锚）

window.location方法

属性	描述
assign()	导航到一个新页面
reload()	强制从服务器重新加载当前页面
replace()	使用新的url替换本页面

以下两种方法等同：

window.location.assign(""); // or  
window.location = "";

登录页面：

 //登录页面
var url = window.location.search.substring(1);
      let 参数名列表= url.split('&')
      let 参数名= urlList[1]?.split('=')[1]
      let 参数名= urlList[2]?.split('=')[1]
      let 参数名= urlList[3]?.split('=')[1]
      if (uuid != undefined) {
        // 验证免登录.
        jumpToJJ({ 参数名: 参数, 参数名: 参数, 参数名: 参数}).then(res => {
          this.loading = true;
          if (res.code == 200) {
            setToken(res.data.access_token)
            setExpiresIn(res.data.expires_in)
            //跳转指定的路由
            this.$router.push({
              path: '/***', query: {
                参数名: 参数
              }
            })
            this.loading = false
          } else {
            this.$message.error('登录失败');
            this.loading = false;
          }
        })

      } else {
        this.loading = false
      }

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {



    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      console.log(to)
      if (to.query.参数名&& to.query.参数名&& to.query.参数名) {
        // 第二次跳转到指定页面
        next({ path: '/路由路径', query: { 参数名: to.query.参数} })
      } else {
        next({ path: '/' })
      }
      NProgress.done()
    } 



else {
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then((res) => {
          isRelogin.show = false
          sessionStorage.setItem('server_time', res.time)
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

二、本地存储

 //本地存储 

 //在需要的地方调用
setSession () {
      sessionStorage.setItem("name", JSON.stringify(需要存储的数据))
    },

//初始化时是否有本地存储
 titleInfo: sessionStorage.getItem("newVideoUpload") ? JSON.parse(sessionStorage.getItem("newVideoUpload")) : []

 //筛选数据上传中是否全部上传（1是0否）

computed: {
    stepdataList () {
      return this.titleInfo.every(item => item.value.every(image => image.fileUrl)) ? 1 : 0
    }
  },

三：vue注入

1、父组件

provide () {
    return {
      [myInjectionKey]: {
        form: this.form,
        rules: this.rules
      },
    }
  },

2、需要拿到数据的子组件

export default {
  inject: {
    injected: { from: myInjectionKey },

  },
  data () {
    return {
      form: this.injected.form,
    }
  },

四：子组件form表单校验

 1、子组件

<el-form ref="form"
             :model="form"
             :rules="rules"
             label-width="160px">
      
    </el-form>

methods: {
    async justify () {
      //校验成功则方法自动返回true，校验方法报错则说明校验失败，返回false
      try {
        return await this.$refs['form'].validate()
      } catch (error) {
        return false
      }
    },
  }

2、父组件

async submit (value) {
      let form= await this.$refs['form'].justify()
      //如果子组件校验方法返回ture，则接着进行其他操作，返回false则提示用户
      if (form) {
           console.log(form) //true
      }else{
        console.log(form) //false
}
    },