最新。頭版

  • 本文永久連結: https://dwatow.github.io/2024/12-05-force-reload-frontend-verion/
  • 前端頁面強迫更新的做法

    1. 前端頁面強迫更新的做法
      1. 後端
      2. 前端

    前端頁面強迫更新的做法

    後端

    開一個 API 讓前端可以取得版號。

    1
    2
    3
    4
    5
    6
    const code = '1.0.0'

    module.exports = (req, res) => {
    console.log(now, code)
    res.send('1.0.0')
    }

    前端

    src/store/actions.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    export default {
    // 登入相關的 action
    // ...
    async checkVersion({ dispatch }) {
    const frontend_version = Cookies.get("version");
    // 前端沒有版本資訊,表示是第一次登入
    // 重新登入,會取得版本資訊
    if (!frontend_version) {
    // 強迫取得版號
    dispatch("logout");
    window.location.href = "/";
    return;
    }

    const backend_version = await API.GET("/v2/version");

    if (frontend_version !== backend_version) {
    // 強迫更新
    Cookies.set("version", backend_version);
    window.location.reload();
    }
    },
    // ...
    }

    src/router/index.js

    1
    2
    3
    4
    5
    6
    7
    8
    export async function beforeEach(to, from, next) {
    // 自動登入,取得 token
    // ...
    await store.dispatch("checkVersion");
    // ...
    // 確認登入,取得使用者資料
    next();
    }
  • tags:
  • { 網頁前端技術 }
  • { exporess }

標籤雲

.new framework 2018鐵人賽 API Doc Aglio Arduino Atom Block Boost Box Model C sharp CRUD CSS CSS Unit CSS3 C_and_Cpp Code Complete 2 Cpp沉思錄 Design Pattern Django ECMA-262 ECMAScript Flex Git HPX HTML Inline JavaScript Jenkins KnR2 LIFF LINE MFC controls MOPCON Media Query OAuth Position Pseudo-elements RWD Raspberry Pi 4 Render tree Rulest Order SVN Selector Sliverlight Specificity TC39 TDD TED TED特區 Transition Ubuntu Vendor Prefix WIN32 API/MFC XML XPath XSLT Xilinx angular1 angularjs animation api assertion async awk axios babel background bash blogger body bootstrap border bugTracker callback canvas chatbot cloud fonts component controller cpp css css-loader database design pattern display docker docsify e2e env eslint exporess express facebook file api file-loader filter flex-grow flex-shrink fontawesome foreign key git git reset git-ftp gitalk google gulp hackmd hash heroku hexo http https husky import iview ivuew javascript jest jquery json keyframes linux login mariadb markdown mentor migration mixin mock model monent nginx ngork node-sass nodejs npm oo opacity orm outline pm2 postman prettier promise protractor proxy pure component python sequelize shell sign-in spy ssl stub sublime text2 swap swing dance test double transition unit test unit testing v-model vee-validate viewport visibility vue vue-cli vue-loader vue-masonry vue-router vue-slot vuex web camp webpack webpack loader which wiki zip zsh 七股宛蓁家兩天一夜 三相整流 三相發電 中柱 人月神話 人機互動 你所不知道的JS 你所不知道的js 再讀一本書 凱宇皓月 動畫特效 十年之後成為大師 台南 和道服說話 圖解柔道之術 團隊溝通技巧 在道館的日子 好想工作室 字型設定 完美 camp 進化論 家家有本難唸的經 小旅行 工業風 影像處理 後搖臂 怦然心動的人生整理魔法 手把開關 抱怨VC6 招募 日舞台南 服三的日子 東岸軍旅 柔道社與我 流浪文章 測試工具 爛 code 收集器 爬蟲 版本控制 狼記事 生平處女秀之電腦裝機 生活小事 直流 CDI 看書 研究所的日子 社大的日子 社服社與我 系統設計 網誌記事 網頁前端技術 舊秋調 藝術 行列輸入法 設計 設計師的路 資料庫 資料庫正規則 踩發桿 追逐我在墾丁*天氣晴 避震器 重構 野狼 鈞祐的獨立山兩天一夜露營 電子DIY 電路 音響拆裝過程 高壓線圈 coil