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)}`);
}

Écoutez les modifications de url et vérifiez l'état de connexion s'il n'est pas connecté, déconnexion.
Vérifier le statut de connexionurl 变化，如果不是login logout 就检查登录状态。
检查登录状态

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

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

3. 如果需要异步检测，就异步检测是否登录，如果成功 刷新一下lastcheck

   Vérifiez les variables js et accédez directement à la page de connexion sans vous connecter
   Si la variable js a été connectée, déterminez si une détection asynchrone est nécessaire et terminez si aucune détection n'est requise (par exemple, la dernière détection a eu lieu dans les 60 secondes).
   🎜 🎜🎜Si une détection asynchrone est requise, vérifiez si vous devez vous connecter de manière asynchrone. En cas de succès, actualisez l'heure du lastcheck. 🎜🎜 🎜🎜Si vous détectez que vous n'êtes pas connecté, accédez directement à la page de connexion🎜🎜 🎜

Answer 2

Après la connexion, l'API back-end donne le jeton, le front-end stocke le jeton et transmet le jeton lorsque l'accès nécessite une connexion. Le routage frontal détermine s'il existe un jeton et, sinon, connectez-vous. De plus, le frontal dispose d'une gestion des erreurs pour les API interactives asynchrones. Par exemple, le code d'erreur du back-end indique que le jeton a expiré. Le front-end efface le jeton précédent et passe à la connexion.

Answer 3

La pratique habituelle est désormais que le front-end envoie le nom d'utilisateur et le mot de passe au backend via l'API. Quant à savoir s'il faut rester connecté, le backend définit le cookie et le frontend n'a rien à faire

.

Answer 4

Stockage du statut de connexion via localStorange, mais il n'y a aucune sécurité du tout

Answer 5

Le statut de connexion est stocké dans le cookie par le backend. Vous n'êtes pas obligé d'y penser.

Answer 6

Laissez simplement l'arrière-plan définir les cookies.

Après avoir défini le cookie en arrière-plan, l'en-tête sera automatiquement affiché lorsque le front-end fera une demande.

Convenez ensuite d'un code de statut Lorsque la demande renvoie un code de statut spécifique, elle passera à la page de connexion.

Answer 7

Quelle que soit la situation, le front-end ne sait pas qui est l'utilisateur ni s'il est connecté. Alors qui sait ? extrémité arrière!

Il vous suffit donc de fournir les informations de statut de connexion que le backend vous donne à chaque fois et de laisser le backend les vérifier.

1. Vous pouvez le stocker dans un cookie et l'envoyer à chaque fois que vous le demandez. Bien sûr, cela peut être transparent pour vous, laissez le backend installer des cookies et définissez-le sur http uniquement.

2. Comme il s'agit d'une seule page, elle peut également être stockée dans une variable globale en mémoire. Sinon, elle ne sera pas connectée.

3. Vous pouvez mettre en cache le jeton vous-même et l'apporter manuellement à chaque fois que vous envoyez une demande.

Answer 8

Cela dépend de la façon dont votre backend le prend en charge. Les méthodes de jeton et de cookie sont acceptables

.

Answer 9

loopback+vue+vue-resource, modèles de séparation front-end et back-end, fonction de pagination de page vue, contrôle des autorisations d'authentification, mécanisme de jeton d'accès, informations d'identification, CI, docker

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

Il suffit de regarder mon exemple de projet pour découvrir la solution complète

.