Un componente de inicio y cierre de sesión basado en token

notas

1. Puntos técnicos relevantes del negocio de inicio de sesión

• http no tiene estado
• Registro de estado en el lado del cliente a través de cookies
• Registrar el estado en el lado del servidor a través de la sesión
• Mantener el estado a través del token

Aviso:

• Si no hay un problema entre dominios entre nuestras interfaces de front-end y back-end, generalmente usamos cookies y sesiones para registrar el estado de inicio de sesión.
• Si hay un problema entre dominios, generalmente usamos token para mantener el estado de inicio de sesión

2. Análisis del principio del token

token es el único token de identidad que garantiza el inicio de sesión exitoso del usuario

1. Página de inicio de sesión Ingrese el nombre de usuario y la contraseña para iniciar sesión
2. Después de autenticar el servidor, el valor del token del usuario se genera y se devuelve al cliente

   Aviso:

   1. el token es generado por el servidor
   2. El valor del token correspondiente a cada usuario diferente es diferente
3. El cliente almacena el token.
4. Todas las solicitudes posteriores del cliente llevarán el token para enviar solicitudes, de modo que nuestro servidor pueda determinar a qué usuario pertenece la solicitud de acuerdo con diferentes valores de token y devolver diferentes resultados para diferentes usuarios.
5. El servidor verifica si existe el token, si existe, comprueba que ha iniciado sesión y luego devuelve los datos correspondientes de acuerdo con el token.

3. Conocimiento relacionado con Git

• Configurar la clave pública cuando git ya está instalado
• instrucción
• Compruebe si el espacio de trabajo actual está limpio: estado de git
• Crea una sucursal: git checkout -b "nombre de la sucursal"
• Ver todas las ramas: rama git (* es la rama actual)
• Agregue contenido del directorio de trabajo al área de preparación: git add .
• Agregue el contenido del área de almacenamiento temporal al almacén local: git commit -m "comentarios"
• Fusionar otras ramas: git merge "nombre de la rama que se fusionará"

propiedades de configuración del paquete web - devServer

4. Estilos globales

• Agregue los activos/estilos del directorio estático en el directorio src
• Crea un archivo css en el directorio de estilos.
• Importar en main.js

// 导入全局样式表
import './assets/styles/reset.css'

// 导入字体图标
import './assets/fonts/iconfont.css'

5. Operación después de iniciar sesión

• Todas nuestras páginas deben ser accesibles solo después de un inicio de sesión exitoso, entonces, ¿cómo juzgamos si el inicio de sesión es exitoso? En este momento, necesitamos usar nuestro token, porque el servidor nos lo emite después de que hayamos iniciado sesión correctamente. token único
• Necesitamos realizar las siguientes dos operaciones.

1. Guarde el token después de iniciar sesión correctamente en el almacenamiento de sesión del cliente
   1. Hay interfaces API distintas al inicio de sesión en el proyecto, a las que se debe acceder después del inicio de sesión
   2. El token solo debe surtir efecto cuando el sitio web actual está abierto, así que guarde el token en sessionStorage

window.sessionStorage.setItem("token", res.data.token);

• Vaya a la página de inicio de fondo a través de la navegación programática, la dirección de enrutamiento es /home

• // 先在路由表里进行如下配置
      {
        
        
        path: '/home',
        component: Home
      }
  
  // 然后在Login组件里登录成功之后写编程式导航对象调用push方法
  this.$router.push('/home')
  

  6. Implementación de la función de salida

  • principio:

  • La salida basada en token es relativamente simple, solo es necesario destruir el token local

  • De esta forma, las solicitudes posteriores no llevarán el token, y deberá iniciar sesión nuevamente para generar un nuevo token antes de poder acceder a la página.

  • el código se muestra a continuación:

  // 清空token
  window.sessionStorage.clear()
  // 跳转至登录页
  this.$router.push('/login')