Vue怎么实现记住我
Vue实现“记住我”功能的方法
在Vue中实现“记住我”功能通常涉及前端存储用户登录状态或凭据，常见方法包括使用浏览器的本地存储（localStorage/sessionStorage）或Cookie。以下是具体实现方案：
使用localStorage存储登录状态
登录表单提交时，若勾选“记住我”，将用户token或登录状态存入localStorage：
// 登录方法示例
methods: {
handleLogin() {
axios.post('/login', { username, password }).then(response => {
if (this.rememberMe) {
localStorage.setItem('authToken', response.data.token);
}
sessionStorage.setItem('authToken', response.data.token); // 临时会话
});
}
}页面加载时检查本地存储：
created() {
const token = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');
if (token) {
this.autoLogin(token); // 自动登录逻辑
}
}使用Cookie存储登录状态
通过js-cookie库操作Cookie：
import Cookies from 'js-cookie';
// 登录成功后
if (this.rememberMe) {
Cookies.set('authToken', token, { expires: 7 }); // 7天后过期
} else {
Cookies.set('authToken', token); // 会话Cookie
}安全注意事项
- 敏感信息（如密码）不应直接存储，仅保存Token
- Token应设置合理的过期时间
- 考虑使用HttpOnly Cookie增强安全性
- 服务端需验证Token有效性
完整组件示例
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名">
<input v-model="password" type="password" placeholder="密码">
<label>
<input v-model="rememberMe" type="checkbox"> 记住我
</label>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
rememberMe: false
};
},
methods: {
handleLogin() {
// 调用登录API
// 根据rememberMe选择存储方式
}
},
created() {
// 检查已有登录状态
}
};
</script>
