login_push

¿Vue+Koa2 usa jwt para implementar el inicio de sesión único ?

---

2018-12-17

Esta actualización README es principalmente para compensar las conexiones de imágenes rotas.

Desde mi punto de vista personal, me gusta bastante este tipo de proyecto de pila completa. Aunque parece muy simple en la página, no es necesario mirar mi código. , Hay muchos puntos de conocimiento.

• ¿Cómo utilizar jsonwebtoken en la práctica?
• Control del enrutamiento de inicio de sesión único
• Cómo utilizar koa2 para crear un entorno de desarrollo backend que le satisfaga
• Comprenda mongodb , complete la introducción y comprenda el uso general de API
• Al igual que el front-end Vue React , etc. Cuanto más escribas, más competente serás.

¿Cómo funciona?

Entorno requerido:安装并启动的mongodb npm (si hay un problema con el entorno, definitivamente no se iniciará)

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

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

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

(Cliente)cliente:

• vista
• enrutador vue
• axios
• elemento
• jsonwebtoken

(servidor)servidor

• koa2
• analizador de cuerpos koa
• enrutador koa
• md5
• mangosta
• pm2

¿Qué funciones se implementan?

• Acceso
• registro
• Finalizar la sesión
• lista de tareas pendientes agregar eliminar modificar ver
• operación de selección múltiple de lista de tareas pendientes

modo de validación jwt

Aquí el token se almacena en localStorage . Otra forma es guardarlo en una cookie. El código puede cambiar un poco, pero el efecto es exactamente el mismo.

acceso

registro

lista de tareas pendientes

Reflexiones sobre el control de enrutamiento

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

La interfaz de verificación unificada de backend /api/verification , cada salto de enrutamiento determina si el token ha caducado o ha sido modificado.

Sin iniciar sesión

Cuando el primer token de inicio de sesión no existe, el backend debe responder con 0 y pasar directamente.

Si no ha iniciado sesión, vaya a la página después de iniciar sesión. Si no ha iniciado sesión, se le solicitará el token por separado.

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

Esto significa que login debe ser 0, hasta next()

Cuando inicie sesión

El token ya existe y el tipo es 1. Al acceder /todoList , next()

Visite /login , escriba 1, salte a /todolist y proporcione un mensaje al usuario.

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