1. Install vue-cookies
npm install vue-cookies -S
2. Introduce in main.js
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
As shown in the picture:
3. Used in the vue component (if the object is stored, it needs to be converted to a json string first)
set cookies
this.$cookies.set('fileInfoId', to.query.fileInfoId)
If it is used under a certain js, such as router.js, it can be imported and used as follows
import cookies from "vue-cookies";
cookies.set('fileInfoId', to.query.fileInfoId)
4. Get cookies
this.$cookies.get('fileInfoId')
5. Delete cookies
this.$cookies.remove('fileInfoId');
6. View cookies
this.$cookies.isKey('fileInfoId') // return false or true
7. Get all cookies
this.$cookies.keys() // return a array
8. For the problem that there are cookies in the browser, but the front end cannot get them:
httpOnly defaults to true and ticks √, javascript is prohibited from operating cookies, resulting in failure to obtain them, and the backend can be set to false;
The backend uses node+koa to plant a cookie on the client, but the cookie cannot be obtained through document.cookie in the client. After investigation, it is because koa automatically defaults to httpOnly through ctx.cookies.set(name, value, [options]) cookies. httpOnly is a server-accessible cookie, and the default is true. Javascript is prohibited from operating cookies (to avoid cross-domain scripting (xss) attacks, cookies marked with HttpOnly cannot be accessed through javascript's document.cookie.)
So by setting ctx.cookies.set(name, value, {httpOnly: false}) just turn off httponly.