vue3制作第三方网页流程

刚入职公司两个月让我做一个三方网页出来，还是后台管理系统内部页面，一开始感觉脑袋疼没有思路（小菜鸡一个），后来问大神上网查资料刚有点头绪，服务器崩了用不了一点，主管有在催促，怎么办呢？硬着头皮盲写，总得来说波折挺多，但是好歹最后还是完成了。（长舒一口气）

接下来总结一下这几天来的经历（其实挺简单的，但是之前没接触过，所以感觉头很大）、

一、路由拆分

首先拆分需要做成三方页面的路由放在最外层

 {
    name: "dataCalibration",
    path: "/dataCalibration",
    component: () => import( "@/views/report_forms/data_check.vue"),
    meta: {
      title: `数据校验`,
    }
  },
  {
    name: "teacherInformation",
    path: "/teacherInformation",
    component: () => import( "@/views/roster/roster"),
    meta: {
      title: `教师信息`,
    }
  },

二、单独的方法

既然要管理系统内部跟单独打开都能用，那肯定需要单独的房费，还需要后端出一个有权限的token，单独的页面还要有单独的逻辑处理，这里我用了mixins（混入）加promise。废话不多说，直接上代码。

import { ref } from 'vue';
import CryptoJS from "crypto-js";
import { useRouter } from 'vue-router';
import Cookies from "js-cookie";
import { loginById } from "@/api/admin";
import { setToken } from "@/utils/auth";

export const useCounter = () => {
      // 嵌入方法
    // const urlParams = new URLSearchParams(window.location.search.split("?")[1]);
    // 获取url路径传过来的值
    const urlParams = new URLSearchParams(window.location.hash.split("?")[1])
    let RoleType = urlParams.get("RoleType") || ''; //角色类型（英文）
    let AlignToken = urlParams.get("AlignToken") || ""; //获取教师idid
    let roleListType = urlParams.get("roleListType") || ""; //角色类型（中文）
    let dslToken = urlParams.get("dslToken") || ""; //获取传过来的tonken
    const SECRET_KEY = "H6uZdDcB8JbJrNh5ptbZ";
    const router = useRouter();

    const fetchData = () => {
      return new Promise(async (resolve, reject) => {
        AlignToken = encryption(AlignToken)
        dslToken = encryption(dslToken)
          if(AlignToken&&dslToken) {
            let { code,result } =await loginById({teacherId:AlignToken})
            if(code===0){
              setToken(result.token)
              localStorage.setItem('dslToken', dslToken)
            }else{
              router.push({ path: "/pathMatch" })
            }
          }else if(router?.currentRoute?.value?.path=='/teacherInformation'||router?.currentRoute?.value?.path=='/dataCalibration'){
            if(!AlignToken&&!dslToken){
              router.push({ path: "/pathMatch" })
            }
          }
          // 数据校验
          if(router?.currentRoute?.value?.path=='/dataCalibration'||router?.currentRoute?.value?.path=='/dataCalibration')
            { 
              if(RoleType){
                localStorage.setItem('RoleType',RoleType)
              } else{
                localStorage.setItem('RoleType','')
              }
          
              if(roleListType){
                if(roleListType.includes('校')){
                  localStorage.setItem('roleListType_3','校级')
                }else{
                  localStorage.setItem('roleListType_3','')
                }
              }else{
                localStorage.setItem('roleListType_3','')
              }
            }
            resolve()
      });

      

    };

    // 解密
    const encryption = (data) => {
        const uriDecoded = decodeURIComponent(data)
        const secretKey = CryptoJS.SHA256(SECRET_KEY)
        const decryptResult = CryptoJS.AES.decrypt(
        {
            ciphertext: CryptoJS.enc.Base64.parse(uriDecoded) 
        },
        secretKey,
        {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7 // 需要明确指定填充方式
        }
        )
        const originalUserId = decryptResult.toString(CryptoJS.enc.Utf8)
        return originalUserId
    }
  
    return {
      fetchData,
      RoleType,
      AlignToken,
      roleListType
    };
  };

三、单独页面代码示例

这个地方就用一个页面示例，其他页面类似。

    先请求了token然后再来执行页面其他请求，不然会发生同线程执行的情况。

import {useCounter} from "@/utils/mixins.js"

const userStr = useCounter()

onMounted(async() => {
  userStr.fetchData().then(()=>{
    getOrganizationTree()
    if (localStorage.getItem('RoleType') != 'teacher'||localStorage.getItem('roleListType_3')!='校级') {
      get_findAll()
      }
  })   
});