zdppy+vue3+onlyoffice文档管理系统实战 20240902 上课笔记 登录功能优化
遗留问题
- 1、登录以后跳转最近文档
- 2、如果用户没有登录应该自动跳转登录页面
- 3、如果用户的token校验失败，应该自动调整登录界面
- 4、按回车键自动跳转登录页面
登录以后跳转最近文档
const router = useRouter()
router.push("/")
实际代码：
const loginData = await api.login(data.username, data.password)
console.log("xxx登录信息：", loginData)
if (loginData) {
message.success("登录成功")
await router.push("/")
}
按回车键自动跳转登录页面
参考
在 Vue 3 中，你可以使用 @keyup 事件侦听器来绑定键盘事件，并通过检查事件对象的 keyCode 或 key 属性来确定是否是 Enter 键被按下。以下是如何在 Vue 3 中绑定 Enter 键事件的示例：
在这个示例中：
@keyup.enter是一个事件修饰符，它确保只有在按下 Enter 键时，handleEnter方法才会被调用。handleEnter是一个方法，当用户在输入框中按下 Enter 键时会被触发。
Vue 3 引入了事件修饰符的简写，使得绑定特定键的事件更加简洁。除了 .enter 之外，还有其他的修饰符，如 .tab、.delete（捕获 “Delete” 和 “Backspace” 键）、.esc、.space、.up、.down、.left 和 .right。
确保你的 Vue 项目已经正确设置，并且你使用的是 Vue 3 的版本。如果你使用的是 Vue 2，绑定键盘事件的方式会有所不同，因为 Vue 2 使用了不同的事件处理和修饰符系统。
给登录按钮绑定键盘enter事件
<a-button type="primary" html-type="submit" @keyup.enter="onFinish">立即登录a-button>
记住用户的登录信息
核心：
- 用户名
- 用户ID
- 用户Token
怎么去记住？
前端也有自己的缓存对象，叫做localstorage，这个专门帮我们将数据存储在浏览器中，哪怕浏览器关闭了重新打开也还在。所以，它适合用来存储一些和安全不相关的数据，或者加密的数据。
稍微封装localstorage
如果你希望将 localStorage 的操作封装成独立的函数，而不是使用类，可以按照以下方式进行：
/**
* 将数据保存到localStorage
* @param {string} key - 存储数据使用的键
* @param {Object} data - 要存储的数据，对象将被转换为JSON字符串
*/
function setLocalStorageItem(key, data) {
const stringifiedData = JSON.stringify(data);
localStorage.setItem(key, stringifiedData);
}
/**
* 从localStorage获取数据
* @param {string} key - 检索数据使用的键
* @returns {Object|null} - 存储在localStorage的数据，如果找到则为JSON对象，否则为null
*/
function getLocalStorageItem(key) {
const stringifiedData = localStorage.getItem(key);
if (stringifiedData === null) {
return null;
}
try {
return JSON.parse(stringifiedData);
} catch (error) {
console.error("Error parsing localStorage data:", error);
return null;
}
}
/**
* 从localStorage删除数据
* @param {string} key - 要删除的数据的键
*/
function removeLocalStorageItem(key) {
localStorage.removeItem(key);
}
/**
* 清空所有localStorage数据
*/
function clearLocalStorage() {
localStorage.clear();
}
// 使用示例
setLocalStorageItem('user', { name: 'John Doe', age: 30 });
const user = getLocalStorageItem('user');
console.log(user); // 输出: { name: 'John Doe', age: 30 }
removeLocalStorageItem('user');
const userAfterRemoval = getLocalStorageItem('user'); // 输出: null
在这个示例中，每个 localStorage 操作都被封装成了一个独立的函数：
setLocalStorageItem函数用于存储数据。getLocalStorageItem函数用于检索数据。removeLocalStorageItem函数用于删除指定键的数据。clearLocalStorage函数用于清空所有的localStorage数据。
这种方式使得每个函数都专注于一个特定的任务，便于维护和重用。同时，它们都是独立的，可以根据需要在不同的脚本或组件中调用。
进一步封装storage
export default {
/**
* 将数据保存到localStorage
* @param {string} key - 存储数据使用的键
* @param {Object} data - 要存储的数据，对象将被转换为JSON字符串
*/
set: (key, data) => localStorage.setItem(key, JSON.stringify(data)),
/**
* 从localStorage获取数据
* @param {string} key - 检索数据使用的键
* @returns {Object|null} - 存储在localStorage的数据，如果找到则为JSON对象，否则为null
*/
get: key => {
try {
return JSON.parse(localStorage.getItem(key));
} catch {
return localStorage.getItem(key)
}
},
/**
* 从localStorage删除数据
* @param {string} key - 要删除的数据的键
*/
delete: key => localStorage.removeItem(key),
/**
* 清空所有localStorage数据
*/
clear: () => localStorage.clear()
}
存储用户的登录信息
- 1、用户名
- 2、用户ID
- 3、用户Token
const loginData = await api.login(data.username, data.password)
if (loginData) {
storage.set("userid", loginData.id)
storage.set("username", loginData.username)
storage.set("token", loginData.token)
message.success("登录成功")
await router.push("/")
}
没有token就没有登录
在 Vue 应用中，使用 Vue Router 的全局前置守卫 (beforeEach) 来检查用户是否拥有有效的 token 是一种常见的做法。如果用户没有 token 或者 token 无效，你可以重定向他们到登录页面。以下是如何实现这一功能的步骤：
-
安装和设置 Vue Router：
确保你的 Vue 项目中已经安装并配置了 Vue Router。 -
创建路由守卫：
在路由配置文件中（通常是router/index.js或router.js），添加一个全局前置守卫。 -
检查 token 并重定向：
在守卫中，检查用户的 token 是否存在且有效。如果不存在或无效，使用router.push方法将用户重定向到登录页面。
以下是一个示例代码：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
// 定义你的路由
{ path: '/login', component: () => import(/* webpackChunkName: "login" */ '../views/LoginView.vue') },
{ path: '/', component: () => import(/* webpackChunkName: "home" */ '../views/HomeView.vue') },
// 其他路由...
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
// 假设你使用 localStorage 存储 token
const isAuthenticated = !!localStorage.getItem('user-token');
if (to.path !== '/login' && !isAuthenticated) {
// 如果用户未认证且试图访问非登录页面，则重定向到登录页面
next('/login');
} else {
// 否则，允许路由继续
next();
}
});
export default router;
在这个示例中：
- 我们定义了两个路由：登录页面 (
/login) 和主页 (/)。 - 在
router.beforeEach中，我们检查用户是否已经认证。这里我们假设认证信息（token）存储在localStorage中，键名为'user-token'。 - 如果用户未认证且试图访问除登录页面之外的页面，他们将被重定向到登录页面。
- 如果用户已经认证，或者他们试图访问登录页面，路由将正常继续。
注意事项：
- 安全性：请注意，仅在客户端检查 token 是不够的。你应该在服务器端也进行相应的认证检查，以确保安全性。
- 用户体验：在重定向用户之前，考虑是否需要通知用户为什么他们被重定向，特别是在他们已经输入了表单数据的情况下。
- 刷新页面：在某些情况下，你可能需要刷新页面以确保 token 的最新状态被考虑，特别是当 token 刚刚过期时。
这种方法可以有效地保护你的应用，确保用户在访问需要认证的路由之前进行登录。
整合到我们的项目中
原来的代码：
router.beforeEach((to, from, next) => {
// 假设你使用 localStorage 存储 token
const isAuthenticated = !!localStorage.getItem('user-token');
if (to.path !== '/login' && !isAuthenticated) {
// 如果用户未认证且试图访问非登录页面，则重定向到登录页面
next('/login');
} else {
// 否则，允许路由继续
next();
}
});
我们的代码：
router.beforeEach((to, from, next) => {
// 假设你使用 localStorage 存储 token
const isNoToken = !!storage.get('token');
if (to.path !== '/login' && !isNoToken) {
// 如果用户未认证且试图访问非登录页面，则重定向到登录页面
next('/login');
} else {
// 否则，允许路由继续
next();
}
});
左侧菜单优化
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
<a-menu-item key="latest">
<span class="menu-center">最近文档span>
a-menu-item>
<a-menu-item key="my">
<span class="menu-center">我的文档span>
a-menu-item>
<a-menu-item key="share">
<span class="menu-center">共享文档span>
a-menu-item>
<a-menu-item key="user-center">
<span class="menu-center">个人中心span>
a-menu-item>
<a-menu-item key="user-update-password">
<span class="menu-center">修改密码span>
a-menu-item>
<a-menu-item key="user-forget-password">
<span class="menu-center">忘记密码span>
a-menu-item>
<a-menu-item key="user-logout">
<span class="menu-center">注销登录span>
a-menu-item>
a-menu>
