ChatGPT + SORA = CloseAI [005.1] Login界面设计

概述：为什么要做登录

1. 系统要有权限控制：登录 | 注册 | 用户管理 | 角色管理
2. 系统内也是有身份区分的：不同的用户可以使用不同的功能

管理员：完整的权限
高级用户：管理功能外的所有功能
一般用户：仅开放部分功能

实现的过程：

最简单的了解一下工程文件结构：

index.html – main.ts – app.vue – routers/index.ts

路由的修改：

路由：定义一个URL跟文件之间的关系

URL的定义：协议 + 域名 + URI + 参数，举个例子：
https://niugee.com/vuetify3/?a=1

• 协议 ：https （HyperText Transfer Protocol Secure）
• 域名： www.niugee.com
• URI ：vuetify3/
• 参数 ：?开始之后的，定义一些动态的参数：a=1

登录的基本逻辑：

注册并修改路由守卫：

router.beforeEach((to, from, next) => {
 const authStore = useAuthStore(); // 使用authStore
 const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

 if (requiresAuth && !authStore.isLoggedIn) {
  // 如果路由需要授权且用户未登录，重定向到登录页面
  next('/auth/signin');
 } else {
  // 如果不需要授权或用户已登录，正常导航
  next();
 }
});