Obtenga la cookie del navegador en la aplicación Vue

En este tutorial, aprenderemos cómo obtener una cookie del navegador en Vue usando el paquete vue-cookies (npm).

Índice
  1. Instalación del paquete de cookies vue
  2. Obtener galleta

Instalación del paquete de cookies vue

los vue-cookies Los paquetes nos ayudan a obtener fácilmente las cookies en una aplicación de visualización.

Ejecute el siguiente comando para instalar el paquete.

Ahora abre tu main.js archivo y agregue la siguiente configuración (resaltada).

principal.js

import Vue from "vue";
import VueCookies from 'vue-cookies';import App from "./App.vue";

Vue.use(VueCookies);
new Vue({
  render: h => h(App)
}).$mount("#app");

Esto agrega el this.$cookies objeto a nuestra aplicación raíz, para que podamos acceder a ella dentro de nuestros componentes vue <script> etiqueta.

Para obtener una cookie dentro del componente vue, necesitamos usar el this.$cookies.get() pasando un nombre de cookie como argumento.

Aquí un ejemplo:

Vista de la aplicación

<template>
  <div id="app">
     <h1>Vue cookies</h1>
     <button @click="getCookie">Get Cookie</button>  </div>
</template>

<script>
export default {
   methods:{
     getCookie(){
         
      const username = this.$cookies.get("username");      console.log(username);
     }
   }
};
</script>

Nota: si establece un httpOnly a la respuesta, no puede acceder a ella en la aplicación vue.

Si quieres conocer otros artículos parecidos a Obtenga la cookie del navegador en la aplicación Vue puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas