angular.js - 前后端分离的单页应用如何来判断当前用户的登录状态？

Question

有个单页应用的url例如http://cctv.com/!#/car/list,只有在登录的情况下，我才可以去访问这个url，如果不是登录状态，则要跳到登录页面。

以前的话，请求url到后台，后台会判断下当前用户是否登录，但是现在做成单页应用了，也不需要请求到后台了，那么在单页应用的情况下如何来处理用户是否已经登录了的状态呢？

Answer 1

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).

🎜 🎜🎜Jika pengesanan tak segerak diperlukan, semak sama ada untuk log masuk tidak segerak Jika berjaya, muat semula masa lastcheck. 🎜🎜 🎜🎜Jika anda mengesan bahawa anda tidak log masuk, lompat terus ke halaman log masuk🎜🎜 🎜

Answer 2

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.

Answer 3

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

.

Answer 4

Menyimpan status log masuk melalui localStrange, tetapi tiada keselamatan langsung

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

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

Answer 9

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