需求
代码
1. 数据存储
- Vuex存储
- 访问控制和响应式更新：Vuex 提供了一种集中管理和访问控制应用状态的方式，包括用户的登录状态和账号信息。使用 Vuex 可以轻松地在多个组件之间共享登录状态，且状态的更新会自动反映到依赖这些状态的组件中。
- 非持久化：Vuex 的状态默认是非持久化的；当页面刷新或关闭时，存储在 Vuex 中的状态会丢失。这意味着如果用户刷新了页面，你可能需要从本地存储重新加载用户的登录状态和账号信息到 Vuex。
- 本地存储：
- 持久化：
localStorage 和 sessionStorage 提供了简单的 API 来持久化数据在用户的浏览器中。使用本地存储可以在用户会话间保留登录状态和账号信息，即使页面被刷新或关闭后也能保留这些信息。
- 安全考虑：存储敏感信息（如令牌、密码等）时需要小心。虽然本地存储提供了持久化能力，但它易于被跨站脚本（XSS）攻击读取。因此，敏感信息应该谨慎存储，避免直接存储用户的密码，仅存储身份验证令牌，并使用 HTTPS 来保护传输过程。
- 登录时的数据存储：Vuex存储结合本地存储
- Vuex：用户登录状态和账户信息，使应用能够响应状态的变化，更新 UI 并提供动态交互。
- 本地存储：在页面刷新或关闭后持久化用户的登录状态（通常是令牌）。应用启动时，从本地存储加载登录状态并初始化 Vuex 的状态。
2. 登录界面
<template>
<p>Login</p>
<el-form :model="loginForm" :rules="rules" ref="loginForm">
<el-form-item label="user" prop="user">
<el-input v-model="loginForm.user" />
</el-form-item>
<el-form-item label="password" prop="pw">
<el-input type="password" v-model="loginForm.pw" @keyup.enter="submit"/>
</el-form-item>
</el-form>
<el-button @click="submit">LOG IN</el-button>
</template>
<script>
import { setToken } from "@/utils/auth";
import { testLogin } from "@/api/user";
export default {
data() {
loginForm: [],
rules: {
user: [{
required: true,
message: "Please input",
trigger: "blur",
}],
pw: [{
required: true,
message: "Please input",
trigger: "blur",
}],
}
},
methods: {
async submit() {
this.$refs.loginForm.validate((valid) => {
if(valid) {
this.loginAjax();
}
})
},
async loginAjax() {
const res = await Login({...this.loginForm,});
if(res.code === 20000) {
this.$message.success("Login Success!");
const token = res.data.token;
setToken(token);
this.$route.push("/");
}
}
}
}
</script>
