The request.session object will automatically generate a cookie with the default name sessionid, which stores the session's session key value. When the session expires, the cookie will automatically removed. Only when the cookie is cleared can the logged in user log in again.Set the expiration time of the session through the backend, and when the time is up, you can see through the browser that the cookie will automatically disappear. Therefore, it is only necessary to set that the token value in the user's local storage disappears along with the cookie, and the duration of the user's login status can be controlled by setting the expiration time of the session, such as a seven day no login period.We may think that login status can be controlled based on cookies, but in reality, it is not easy to manipulate cookie values in Vue. In JavaScript, we can control cookies through instructions such as document. getElementId(). But in Vue, using the document instruction is likely to result in an empty return value. Therefore, controlling login status cannot be achieved through direct control of cookies.Therefore, we need to write an additional interface in the backend to verify the validity of the token and control the user's login status.Note: Cookies only affect whether users can log in again, and in Vue, it is inconvenient to use cookies to determine user login. Therefore, only tokens can be used to implement this. However, tokens and cookies are independent in the front-end, so if the cookie expires and the token is not cleared, it will result in continuous login. If the token is cleared and the cookie is not expired, it will cause the user to be unable to log in after the login status ends.

In Vue.js, if you simply add multiple whitespaces in a string, it eventually displays a single whitespace.//This will display a single whitespace. 'ab c'If you want to display multiple whitespaces, you could use unicode to represent whitespace.let str1 = 'ab\u00A0\u00A0\u00A0 c'; let str2 = 'ab\u0020\u0020\u0020 c'; let str3 = 'ab\u3000\u3000\u3000 c';These will output multiple whitespaces in strings.

v-if v-else v-else-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。<script setup> const have = ref(true) </script> <template> <div id="app"> <div v-if = "have">我可以被显示出来</div> </div> </template>当have的值为true时，div块被显示。而当have为falseconst have = ref(false)页面无显示，且具有v-if = “have”的div块不存在在html结构中。也可以用v-else添加一个“else模块”，和js的语法相同，当if条件不成立，则显示else模块内容。在vue2.1.0新增的v-else-if，更是可以与上面两个共同使用，但是v-else和v-else-if都必须紧跟在v-if的后面使用（v-else-if可以跟在v-else-if后面）例子：<script setup> const type = ref("哎哎哎") </script> <template> <div id="app"> <div v-if="type==='A' ">A</div> <div v-else-if="type=='B'">B</div> <div v-else-if="type=='C'">C</div> <div v-else-if="type=='D'">D</div> <div v-else>not A/B/C/D</div> </div> </template>执行结果：这里其他的div在html结构中已不存在。在<template>元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上，但是如果想切换多个元素呢？？？此时就可以把一个< template>元素当不可见的包裹元素，并在上面使用v-if，最终的渲染结果将不包含< template>元素。例子：<script setup> const ok = ref(true) </script> <template> <div id="app"> <template v-if="ok"> <h1>哈哈哈哈</h1> <p>这是一个段落</p> <p>这是一个段落</p> </template> </div> </template>运行结果：v-showv-show是另一个用于根据条件展示元素的选项，，用法和v-if大致相同<h1 v-show="ok">hello</h1>不同的是带有v-show的元素时钟会被渲染并且保留在dom中，v-show只是简单的切换原色的css属性display（注意）v-show不支持template元素，也不支持v-else例子：<script setup> const ok = ref(false) </script> <template> <div id="app"> <div v-show="ok">hhhhhhhhhhh</div> </div> </template>不显示但存在v-if和v-show的区别v-if是真正的条件渲染，因为它会确保在切换过程中事件内的**事件监听器和子组件适当得被销毁和重建。是有惰性的：如果在初始渲染的时候事件为假，则什么也不做，直到条件第一次变为真的时候，才会开始渲染条件块v-show相比v-show就简单的多，不管初始条件是什么，元素始终都会被渲染，而且只是简单地基于css进行切换。两者的使用一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁地切换，则用v-show更好一些；如果运行的条件很少改变，则用v-if更好。

在Vue项目开发中，有时候我们需要在style标签中使用我们所定义的JS变量来编写CSS。根据官方文档，我们可以使用v-bind来实现这个目的选项式API：<template> <div class="text">hello</div> </template> <script> export default { data() { return { color: 'red' } } } </script> <style> .text { color: v-bind(color); } </style>组合式API：<script setup> import { ref } from 'vue' const theme = ref({ color: 'red', }) </script> <template> <p>hello</p> </template> <style scoped> p { color: v-bind('theme.color'); } </style>还有一个问题，如果我们的变量是数字，但是我们想要设置像素px怎么办？以下以组合式API为例（选项式API方法大同小异），提供两种解决方案。一种是使用 computed 计算属性改变它<script setup> import { computed } from 'vue'; const props = defineProps({ size: Number }); const sizePx = computed(() => `${props.size}px`) </script> <template> <p>hello</p> </template> <style scoped> p { font-size: v-bind(sizePx); } </style>还有一种方式是使用 CSS 计算属性calc<script setup> defineProps({ size: Number }); </script> <template> <p>hello</p> </template> <style scoped> p { font-size: calc(1px * v-bind(size)); } </style>那么如何在代码中使用style属性呢？也很简单，根据官方文档，在style标签中加上module，然后就能通过$style来使用style中的CSS属性。<template> <p :class="$style.red">This should be red</p> </template> <style module> .red { color: red; } </style>还可以给style的module attribute设置不同的名字，从而调用不同style标签中的属性<template> <p :class="classes1.red">This should be red</p> </template> <style module="classes1"> .red { color: red; } </style> <style module="classes2"> .red { color: green; } </style>如果想要在<script setup>中使用，可以使用 useCssModuleimport { useCssModule } from 'vue'; const classes1 = useCssModule('classes1'); const classes2 = useCssModule('classes2');