Vue guardián de enrutamiento + cookie para verificar si el usuario ha iniciado sesión cuando se redirige la página- (1) cookies

En el proyecto vue, después de que el usuario inicie sesión con éxito, la información del usuario se almacenará en la cookie y luego saltará a la página de inicio. Cuando el usuario no haya iniciado sesión, ingrese directamente la dirección de la página y el enrutador detectará si la información del usuario existe en la cookie. , Redirigir a la página de inicio de sesión para permitir que el usuario inicie sesión. Luego, comience configurando el método de cookies.

Primero, cree un nuevo archivo util / cookie.js en el proyecto como js para almacenar el método de cookies

 

 

 Escriba el siguiente código en cookie.js, el código encapsula tres métodos: setCookie: store cookie; getCookie: read cookie; clearCookie: elimine la cookie especificada; finalmente exporte estos tres métodos para una llamada global, cada línea de código ¿Qué significa exactamente? Puede ver los siguientes tutoriales: tutorial de cookies uno , tutorial de cookies dos , la explicación es muy detallada.

/ * * 
 * @description para guardar cookies 
 * @param {Object} objetos json que necesitan almacenar cookies 
 * @param {Number} días cuántos días almacenar de forma predeterminada 
 * / 
function setCookie (json, days) {
     // establecer tiempo de vencimiento 
    let data = new Date (
         new Date (). GetTime () + days * 24 * 60 * 60 * 1000 
    ) .toUTCString (); 

    for ( var key in json) { 
        document.cookie = key + "=" + json [key] + " ; expires = "+ data; 
    } 
} 

/ * * 
 * @description get cookie 
 * @param {String} name necesita obtener la clave de cookie 
 * / 
functiongetCookie (name) {
     var arr = document.cookie.match ( new RegExp ("(^ |)" + name + "= ([^;] *) (; | $)" ));
    if (arr! = null ) {
         return unescape (arr [2 ]) 
    } else {
         return  null 
    } 
} 

/ * * 
 * @description 删除 cookie 
 * @param {String} name 需要 删除 cookie 的 key 
 * / 
function clearCookie (name) { 
    let json = {}; 
    json [nombre] = '' ; 
    setCookie (json, -1 ) 
}

exportación predeterminada { 
    setCookie, 
    getCookie, 
    clearCookie 
}

Luego, introduzca el cookie.js recién escrito en main.js, y configure el campo de cookie como una variable global a través de Vue.prototype

 

 Una vez completada la introducción, puede agregar o eliminar cookies utilizando this.cookie. Nombre del método (valor) en cualquier página.

this.cookie.setCookie () // 存 cookie

this.cookie.getCookie () // 读 cookie

this.cookie.clearCookie () // 删 cookie

Primero cree una página de inicio de sesión Login.vue en el proyecto para escribir una página de inicio de sesión. Después de iniciar sesión correctamente, use this.cookie.setCookie para almacenar la información del usuario en la cookie.

      contraseña: "" 
    }; 
  }, 
  métodos: {     
    login () {
        
        


    
        if (! this .name) { 
          alert ( "Complete su cuenta" );
           return ; 
        } 
        if (! this .password) { 
          alert ( "Ingrese su contraseña" );
           return ; 
        } 
        if ( this .password && this .name) {
           // Enviar información al método setCookie en formato json, el método recorrerá el json en un solo modo de almacenamiento de datos y lo almacenará en la cookie varias veces 
　　　　　　// Nota: las cookies no admiten el almacenamiento directo en json, ya que 
          permite loginInfo = { 
            LoginName: this .name, 
            openId: "asfafsfsfsdfsdfsdfdsf"
          } 
          // Llame al método setCookie y pase los datos que se almacenarán al mismo tiempo, guarde la cantidad de días que 
          esta alerta .cookie.setCookie (loginInfo, 7 ) 
          ( "Inicio de sesión exitoso" )
           // Salte a la página de inicio 
          esto . $ Router.replace ('/' ) 
        } 
    } 
  } 
};
 </ script>

Después de iniciar sesión correctamente, puede ver el nombre de inicio de sesión guardado, openId y su tiempo de vencimiento en la cookie del navegador.

 

 

 

 Después de un inicio de sesión exitoso, saltamos a la página home.vue y obtuvimos el nombre de inicio de sesión a través de this.getCookie ("LoginName").

 

 

 

 Luego debe borrar la cookie cuando hace clic en cerrar sesión y luego volver a la página de inicio de sesión.

 

 Haga clic para borrar la cookie después de cerrar sesión y vaya a la página de inicio de sesión, ahora vaya a ver la cookie

 

 Encontró que está en blanco.

Hasta ahora, nuestro primer paso se ha completado básicamente, y luego debemos verificar si hay información de inicio de sesión en la cookie al saltar, de lo contrario, no permitiremos el salto y saltar a la página de inicio de sesión. Eso es usar el protector de enrutamiento.