angulaire.js - Comment déterminer l'état de connexion d'un utilisateur actuel dans une application d'une seule page avec un front-end et un back-end séparés?

Question

Il existe une URL d'application d'une seule page telle que http://cctv.com/!#/car/list. Je ne peux accéder à cette URL que lorsque je suis connecté. Si je ne suis pas connecté, je dois accéder à la page de connexion.

Dans le passé, si vous demandiez l'URL en arrière-plan, l'arrière-plan déterminait si l'utilisateur actuel est connecté, mais il s'agit désormais d'une application d'une seule page et il n'est pas nécessaire de demander l'arrière-plan. dans le cas d'une application d'une seule page, comment gérer si l'utilisateur est connecté ? Qu'en est-il de l'état de connexion ?

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

.