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 键事件的示例：

<template>
  <input @keyup.enter="handleEnter" placeholder="Press Enter">
</template>

<script setup>
const handleEnter = (event) => {
  console.log('Enter key was pressed');
  // 在这里执行你想要在按下 Enter 键时进行的操作
};
</script>

在这个示例中：

• @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 无效，你可以重定向他们到登录页面。以下是如何实现这一功能的步骤：

1. 安装和设置 Vue Router：
   确保你的 Vue 项目中已经安装并配置了 Vue Router。

2. 创建路由守卫：
   在路由配置文件中（通常是 router/index.js 或 router.js），添加一个全局前置守卫。

3. 检查 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>