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()
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值