login_push

Vue+Koa2 utilise jwt pour implémenter l'authentification unique ?

---

2018-12-17

Cette mise à jour README vise principalement à compenser les connexions d'images interrompues.

De mon point de vue personnel, j'aime bien ce genre de projet full-stack. C'est très pratique. Vous n'avez pas besoin de regarder mon code. Vous pouvez directement écrire une tâche similaire même si cela semble très simple sur la page. , Il existe de nombreux points de connaissance

• Comment utiliser jsonwebtoken en pratique ?
• Contrôle du routage de l'authentification unique
• Comment utiliser koa2 pour créer un environnement de développement backend qui vous satisfait
• Comprendre mongodb , compléter l'introduction et comprendre l'utilisation générale de l'API
• Tout comme le front-end Vue React , etc. Plus vous écrivez, plus vous deviendrez compétent.

Comment ça marche ?

Environnement requis :安装并启动的mongodb npm (s'il y a un problème avec l'environnement, il ne démarrera certainement pas)

git clone https://github.com/vkcyan/login_push.git

// 服务端
cd server
npm install
npm install start

//客户端
cd client
npm install
npm install start

(Client)client :

• vue
• vue-routeur
• axios
• élément
• jsonwebtoken

(serveur)serveur

• koa2
• koa-bodyparser
• koa-routeur
• md5
• mangouste
• pm2

Quelles fonctions sont implémentées ?

• Se connecter
• registre
• Se déconnecter
• liste de tâches ajouter supprimer modifier la vue
• opération de sélection multiple todolist

mode de validation jwt

Ici, le jeton est stocké dans localStorage . Une autre façon consiste à le sauvegarder dans un cookie. Le code peut changer un peu, mais l'effet est exactement le même.

se connecter

enregistrement

liste de tâches

Réflexions sur le contrôle de routage

 router . beforeEach ( ( to , from , next ) => {
  let token = localStorage . getItem ( 'token' ) // 获取token

  if ( to . name == 'login' ) { // 假如登录 判断token是不是存在 存在让他跳转到主页面
    verification ( token , next )
    . then ( ( data ) => {
      if ( data . data . type ) { // type 为1 直接跳过登录
        Message ( {
          showClose : true ,
          message : '您已经登录,重新登录请退出账户'
        } ) ;
        next ( '/todolist' )
      } else {
        next ( )
      }
    } )
  }

  if ( to . name == 'todoList' ) {
    verification ( token , next )
    . then ( ( data ) => {
      if ( data . data . type ) {
        // type 为1说明token没有失效
        // 跳转到主页面
        next ( )
      } else {
        // token失效 强制定位到登录页面
        if ( token === null ) { // 说明从来没有登陆过
          Message ( {
            showClose : true ,
            message : '您还没有登录' ,
            type : 'warning'
          } )
          next ( '/login' )
        } else {
          Message . error ( '登录信息失效' )
          next ( '/login' )
          localStorage . removeItem ( 'token' )
        }
      }
    } )
    . catch ( ( data ) => {
      console . log ( data ) ;
    } )
  }

  if ( to . meta . title ) {
    document . title = to . meta . title
  }
} )



// 验证
let verification = ( token , next ) => {
  return axios . post ( '/api/verification' , { token } )
}

L'interface de vérification unifiée backend /api/verification , chaque saut de routage détermine si le jeton a expiré ou a été modifié.

Sans vous connecter

Lorsque le premier jeton de connexion n'existe pas, le backend doit répondre par 0 et passer directement.

Si vous n'êtes pas connecté, accédez à la page après la connexion. Si vous n'êtes pas connecté, le jeton sera demandé séparément.

 if ( token === null ) { // 说明从来没有登陆过
          Message ( {
            showClose : true ,
            message : '您还没有登录' ,
            type : 'warning'
          } )
          next ( '/login' )
        } else {
          Message . error ( '登录信息失效' )
          next ( '/login' )
          localStorage . removeItem ( 'token' )
        }

Cela signifie que login doit être 0, via next()

Une fois connecté

Le jeton existe déjà et le type est 1. Lors de l'accès à /todoList , next()

Visitez /login , tapez 1, accédez à /todolist et donnez une invite à l'utilisateur

 if ( data . data . type ) { // type 为1 直接跳过登录
  Message ( {
    showClose : true ,
    message : '您已经登录,重新登录请退出账户'
  } ) ;
  next ( '/todolist' )
} else {
  next ( )
}