history.listen(location => {
  const pathname = location.pathname;
  if (pathname !== '/login' && pathname !== '/logout') {
    dispatch({
      type: 'check',
      payload: pathname
    });
  }else if(pathname === '/logout'){
    dispatch({
      type: 'logout',
      payload: pathname
    });
  }
});

*check({ payload }, { select, call, put }) {
  const { isLogin, lastCheck, interval } = yield select( ({ auth }) => auth);
  const now = (new Date()).getTime();
  yield put({
    type: 'authRedirect',
    payload,
  })
  if (!isLogin){
    yield put(routerRedux.push('/login'));
    return ;
  }
  //是否异步检测
  if (!interval || (now - lastCheck) < interval  ){
    return;
  }
  const { data, err } = yield call(fresh);
  if (data && data.status==0) {
    yield put({
      type: 'freshSuccess',
      payload: data.data,
    });
    return ;
  }
  yield put(routerRedux.push('/login'));
}

// fresh login status
export async function fresh(params) {
  return request(`/api/auth/fresh?${qs.stringify(params)}`);
}

Dengar perubahan url dan semak status log masuk jika ia tidak log masuk log keluar.
Semak status log masukurl 变化，如果不是login logout 就检查登录状态。
检查登录状态

1. 检查js变量，没有登录就直接跳登录页

2. 如果js变量已经登录，就判断一下是否需要异步检测 不需要检测就结束(比如上次检测是在60秒内)。

3. 如果需要异步检测，就异步检测是否登录，如果成功 刷新一下lastcheck
Semak pembolehubah js dan lompat terus ke halaman log masuk tanpa log masuk
Jika pembolehubah js telah dilog masuk, tentukan sama ada pengesanan tak segerak diperlukan dan tamatkan jika tiada pengesanan diperlukan (contohnya, pengesanan terakhir dalam masa 60 saat).

Selepas log masuk, api bahagian belakang memberikan token, bahagian hadapan menyimpan token dan lulus token jika anda perlu log masuk untuk akses. Penghalaan bahagian hadapan menentukan sama ada terdapat token, dan jika tidak, log masuk. Selain itu, bahagian hadapan mempunyai pengendalian ralat untuk API interaktif tak segerak Sebagai contoh, kod ralat bahagian belakang menunjukkan bahawa token telah tamat tempoh mengosongkan token sebelumnya dan beralih kepada log masuk.

Amalan biasa sekarang ialah bahagian hadapan menghantar nama pengguna dan kata laluan ke bahagian belakang melalui API Sama ada untuk kekal log masuk, bahagian belakang menetapkan kuki, dan bahagian hadapan tidak perlu melakukan apa-apa

Menyimpan status log masuk melalui localStrange, tetapi tiada keselamatan langsung

Status log masuk disimpan dalam kuki di bahagian belakang. Anda tidak perlu memikirkannya.

Biar saja latar belakang menetapkan kuki.

Selepas menetapkan kuki di latar belakang, pengepala akan dibawa secara automatik apabila bahagian hadapan membuat permintaan.

Kemudian bersetuju dengan kod status Apabila permintaan mengembalikan kod status tertentu, ia akan melompat ke halaman log masuk.

Tidak kira apa keadaan sekalipun, bahagian hadapan tidak tahu siapa pengguna atau sama ada pengguna itu log masuk. Jadi siapa tahu? bahagian belakang!

Jadi, anda hanya perlu memberikan maklumat status log masuk yang bahagian belakang berikan anda setiap kali dan biarkan bahagian belakang mengesahkannya.

1 Anda boleh menyimpannya dalam kuki dan menghantarnya keluar setiap kali anda memintanya. Sudah tentu, ini boleh menjadi telus kepada anda, biarkan bahagian belakang menanam kuki, dan tetapkannya kepada http sahaja.

2. Kerana ia adalah satu halaman, ia juga boleh disimpan dalam pembolehubah global dalam ingatan.

3 Anda boleh menyimpan token itu sendiri dan membawanya secara manual setiap kali anda menghantar permintaan.

Ia bergantung pada cara bahagian belakang anda menyokongnya kedua-dua kaedah token dan kuki boleh diterima

loopback+vue+vue-resource, templat pemisahan bahagian hadapan dan belakang, fungsi halaman halaman vue, mengesahkan kawalan kebenaran, mekanisme accesstoken, bukti kelayakan, CI, docker

https://github.com/qxl1231/ge...

Lihat sahaja contoh projek saya untuk mengetahui Set penyelesaian yang lengkap