前端頁面強迫更新的做法

  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();
}
發表於