vue后台管理项目--1

1.登录页面

        1：表单验证

        2：数据请求

        3：token存储

        4：路由防卫

1：表单验证

     表单部分

<el-form class="w-[250px]" :rules="rules" ref="formRef" :model="fromObj">
                    <el-form-item prop="username"><el-input placeholder="请输入账号" v-model="fromObj.username">
                            <template #prefix>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password"><el-input type="password" placeholder="请输入密码"
                            v-model="fromObj.password" show-password>
                            <template #prefix>
                                <el-icon>
                                    <Lock />
                                </el-icon>
                            </template></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="onSubmit"
                            class="w-[250px] rounded-3xl bg-blue-600 text-gray-100">登录</el-button>
                    </el-form-item>
                </el-form>

        js部分：给表单添加验证规则

                1：required属性必须为true，否则不会渲染

                2：message为不符合校验规则提示信息

                3：trigger: "blur",为表单失去焦点开始校验

// 验证规则
const rules = {
    username: [
        {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
        },
    ],
};

2：数据请求

            1：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js                 （http://www.axios-js.com/zh-cn/ ）

             2：配置axios 

// 1.导入axios依赖包
import axios from "axios";
// 2.创建axios实例对象
const instance = axios.create({
    baseURL: 'api请求接口地址',
    timeout: 1000,
});
// 暴露对象
export default instance

                3：登录接口请求

// 2.登录接口
export function login(username, password) {
    //返回的是promise对象
    return axios.post("登录接口url", {
        username,
        password
   })
}

        4：在login.vue调用login方法

login(form.username, form.password).then((res) => {
        console.log(res);//成功返回
}).catch((err) => {
        console.log(err);//失败
});

3：  token存储

        1：token存储是利用vueuse库，VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了 Composition API 的封装。

        2：

//引用vueuse
import { useCookies } from "@vueuse/integrations/useCookies";

login(form.username, form.password)
     .then((res) => {
        // 2.存储token值
        const cookies = useCookies();
        cookies.set("admin-token", res.data.data.token);
        //admin-token 为存储token的名称
        //res.data.data.token为请求的token
})
     .catch((err) => {
});

4：路由防卫

        1：路由防卫主要是为了防止用户重复登录，和验证用户是否登录。

        2：通过判断是否有token值

router.beforeEach(async (to, from, next) => {
    document.title = to.meta.title ;
    const token = cookie.get("admin-token");
    if (!token && to.path !== '/login') {//判断是否有token值和地址是否为登录页
        notice('请先登录', 'error')
        return next({
            path: "/login"  //跳到登录页面
        })
    // 防止重复登录
    if (token && to.path == '/login') {
        return next({
            path: from.path //回到原来页面
        })
    }
    // 
    if (token) {
        await store.dispatch('setUserInfo')
    }
    next()
}