前言

今天我们来完成项目的一个基础功能搭建，登录注册功能的搭建

本文中所解读的项目代码地址

https://github.com/un-pany/v3-admin-vite/blob/main/src/pages/login/index.vue

登录注册

引入element-plus

简单的引入方式

使用模块化+unplugin-vue-components+unplugin-vue-import 自动导入插件后的引入方式

-D是 --save-dev的简写形式，意思是将包安装为开发依赖。

unplugin-vue-components
→ Components插件 → 自动注册组件
unplugin-auto-import
ElMessage() → AutoImport插件 → 自动导入函数

下载

	// 用于自动解析解析element-plus的标签
	npm install -D unplugin-vue-components
	npm install unplugin-auto-import

vite.config.ts中引入这两个插件

	import AutoImportfrom "unplugin-vue-import/vite"	//处理组件引入
	import Components from "unplugin-vue-components/vite" //处理函数引入
	import {ElementPlusResolver} from "unplugin-vue-components/resolvers";// 专门为 Element Plus 组件库设计的解析器

vite.config.ts中配置这两个插件

export default defineConfig({
  plugins: [
      vue(),
      // 自动按需导入 API
      AutoImport({
        imports:["vue","vue-router","pinia"], // 要自动导入的库,告诉插件需要自动导入哪些库的 API
        dts:"types/auto/auto-imports.d.ts",// 类型文件输出路径
        
      }),
      // 自动按需导入组件
      Components({
          dts: "types/auto/components.d.ts",
          resolvers: [ElementPlusResolver()]// 组件库解析器
      }),
  ],
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }
})

到这里，就引入完成了

在login/index.vue中使用element-plus创建登录表单

引入pinia

ok，开始对于登录注册功能以及登录页面的一个处理逻辑梳理了

首先我们需要做的是进入网站时，先判断用户是否处于登录状态

通过前置路由守卫来进行一个进入网站时的登录状态判断

如何进行登录状态判断呢，首先通过useUserStore获取到我们的用户个人信息
useUserStore
用户管理user数据的store（pinia作为状态管理方案下创建的store)
通过userStore的getToken方法从cookie中获取token
通过token判断登录状态

const LOGIN_PATH = "/login"

// 如果没有登录
  router.beforeEach(async (to, _from) => {
    const userStore = useUserStore()

    if (!getToken()) {
      // 如果在免登录的白名单中，则直接进入
      if (isWhiteList(to)) return true
      // 其他没有访问权限的页面将被重定向到登录页面
      return `${LOGIN_PATH}?redirect=${encodeURIComponent(to.fullPath)}`
    }
   })

如此，我们就解决了进入网站以及网站进行路由跳转时的登录状态判断失败后跳转登录页面的逻辑，
接下来看看登录功能怎么写

登录功能

1.写页面及页面样式
2.绑定变量
3.设定账户密码输入规则
4.点击登录按钮，发送登录请求
5.点击注册按钮发送注册请求
6.登录成功后存储登录信息

关于项目中ts版本的axios封装我还不是特别明白，之后我需要去看看js版本的写法，再回来对比一下这两个版本写法的区别。另外promise相关的知识我也有些遗忘需要恶补一下

问题1：为什么会出现?redirect=/

所以这个redirect的意思应该就是在登录成功后跳转到redirect的path上
就完成了进入某个登录页面外的其它页面时没有登录权限，跳转登录页面登录后再根据redirect跳转到之前需要登录权限的其他页面
那这一部分操作的处理代码是在哪里呢？
在登录方法那里进行了跳转

原因：目标项目也会有出现这个

http://localhost:3333/#/login?redirect=/dashboard

事件2：尝试将代码再进行优化，优化为另一个项目的结构

处理完登录后，我们去看看布局的一个整体设置

当然这个布局主要是针对登录后进入的管理页面的布局啦
首先我记得，我们是设置了一个layouts文件夹，里面有个根据不同屏幕宽度启用不同布局模式component的index.vue文件
然后这个布局模式的component上有个AppMain组件用于展示主体页面内容

LeftMode.vue 左侧布局模式解读

script部分

获取 appStore 一个用于管理网站应用整体状态的store：
1.通过cookie获取到的侧边栏状态管理，默认值为
2.用户设备类型，通过默认值为Desktop
3.使用watch 监听了siderbar.opened的状态，改变后调用 handleSidebarStatus(opened)方法重新设置cookie中的侧边栏状态值：opened，closed
4.切换侧边栏方法，参数1 withoutAnimation: boolean（），反转侧边栏状态（sidebar.opened = !sidebar.opened）
5.关闭侧边栏方法
6.切换设备类型方法

引入 useDevice : 一个对象{ isMobile,isDesktop} ,通过computed属性

记住，你需要做个总结，自己重新创建一个新的项目，不去看之前的目标项目，尝试用自己所学去创建一个完整的项目结构，先做什么，后做什么都要搞清楚，单独写一篇文章来描述