Vue реализует доступ к данным между проектами 🙂

Vue.js
Vue реализует доступ к данным между проектами 🙂

Менталитет определяет успех или неудачу, встречайте будущую жизнь с хорошим настроем😁

предисловие

Сценарий спроса выглядит следующим образом: в проекте Vue вызываемый интерфейс требует от пользователя входа в систему для доступа через токен.В это время связанные страницы входа развернуты по разным путям одного и того же доменного имени и не могут быть доступ в текущем проекте. Как его получить? Токен, возвращенный целевой страницей? Далее я поделюсь с вами решением, давайте посмотрим на окончательный эффект 🤒

Реализовать идеи

  • Получить токен из локального хранилища после создания страницы
  • Определить, существует ли токен
  • Если токен не существует, используйте js, чтобы открыть новое окно, чтобы открыть страницу входа, а если токен существует, обновите токен в vuex.
  • На странице входа: успешно войдите в систему, чтобы получить токен, сохраните токен в локальном хранилище и закройте открытое в данный момент окно.
  • Слушайте закрытие дочернего окна, обновляйте текущее окно и обновляйте токен в vuex.
  • Ядро: храните необходимые данные в локальном хранилище, а Vue считывает данные из локального хранилища.

Процесс реализации

Полезно в следующем кодеlodashБиблиотека выполняет непустую проверку, нужно использоватьyarn | npmУстановите эту библиотеку, вызов интерфейса сделанАбстракция API, в этой статье ничего не объясняется, о реализации API извлечения вы можете обратиться к другой моей статьеVue разумно настраивает аксиомы и реализует реальное приложение в проекте.

    // App.Vue
    created: function(){
      // 页面创建完成后，从localstorage中获取token更新vuex
      const token = localStorage.getItem("token");
      if(lodash.isEmpty(token)){
        // 跳转登录页
        let windowOBJ = this.openWin("https://www.kaisir.cn/login","loginWindow",800,675);
        // 使用定时器判断当前窗口是否关闭
        let loop = setInterval(()=>{
          if(windowOBJ.closed){
            clearInterval(loop);
            // 刷新当前页
            parent.location.reload();
          }
        },1);
      }else{
        // 更新vuex中的token
        this.$store.state.token = token;
      }
    },
    // 方法
    methods:{
      // 居中打开一个新窗口
      openWin:(url,name,iWidth,iHeight)=>{
        //获得窗口的垂直位置
        const iTop = (window.screen.availHeight - 30 - iHeight) / 2;
        // //获得窗口的水平位置
        const iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        return window.open(url, name, `width=${iWidth},height=${iHeight},top=${iTop},left=${iLeft},toolbar:0`);
      }
      
   // 测试需要验证接口的调用
   sendMessage:function(){
       this.$api.websiteManageAPI.getJSON(1,3).then((res)=>{
           console.log("接口调用成功");
           console.log(res)
       });
   }

Побить пит-рекорд

  • Дочернее окно закрывается, обновите родительскую страницу

    Сначала идея заключалась в том, чтобы обновить родительскую страницу в дочернем окне, а затем закрыть текущее дочернее окно. В результате браузер сообщает об ошибке: Uncaught DOMException: Blocked with origin as "www.kaisir.cn«Фреймворк обращается к междоменному фрейму. Затем используйте таймер, чтобы отслеживать закрытие дочернего окна и обновлять родительское окно. Конечно, если вы не учитываете междоменную проблему, вы можете обновить родительское окно на страница входа.

      // 登录成功将token存储到本地存储，并刷新父页面
  localStorage.setItem("token",res.token);
  opener.location.reload();
  window.close();

  • Правильная реализация: использовать таймер для патрулирования, следить за закрытием подокна, затем обновлять текущую страницу и очищать таймер
   // 跳转登录页
   let windowOBJ =     this.openWin("https://www.kaisir.cn/login","loginWindow",800,675);
   // 使用定时器判断当前窗口是否关闭
    let loop = setInterval(()=>{
      if(windowOBJ.closed){
        clearInterval(loop);
        // 刷新当前页
        parent.location.reload();
      }
    },1);

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
  • Эта статья была впервые опубликована в Наггетс, если вам нужно перепечатать, пожалуйста, оставьте сообщение в области комментариев 💌
Категории