标签：Axios const element token vue plus

vue3+element-plus+登录逻辑token环境搭建

需求说明

项目初始化

1 import ElementPlus from 'element-plus'
2 import 'element-plus/dist/index.css'
3 const app = createApp(App) 
4 app.use(ElementPlus)

 

• 安装脚手架工具

1 npm i @vue/cli@4.5.13 -g

• 验证是否安装成功

1 vue -V # 输出 @vue/cli 4.5.13

• 脚手架初始化目录结构

1 vue create jd-shop-manager

• 手动配置需要的功能

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

•  进入到项目目录

1 cd jd-shop-manager

• 附加其他依赖

1 npm i axios element-plus pinia -S

• 运行项目

1 npm run serve

浏览器输入localhost:8080查看效果

 

 

 

配置第三方库

Element-plus

1 import ElementPlus from 'element-plus' 
2 import 'element-plus/dist/index.css' 
3 const app = createApp(App) 
4 app.use(ElementPlus)

Axios

1 Axios.defaults.baseURL = '/api'; 

2 app.config.globalProperties.$ajax = Axios;

vue.config.js配置代理

实现一个基于ElementPlus的基础登录框

<template> <el-form label-width="80px" ref="formRef" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button @click="submit(formRef)">提交</el-button> <el-button @click="reset(formRef)">重置</el-button> </el-form-item> </el-form> </template>

 

<script setup> import { reactive, ref } from "vue"; const form = reactive({ username: "admin", password: "123456", }); const rules = reactive({ username: [{ required: true, message: "必须输入用户名" }], password: [ { required: true, message: "必须输入密码" }, { min:3,max:10 , message:'长度必须在3-10位数'} ], }); const formRef = ref(); const submit = function (formEl) { formEl.validate((valid) => { if (valid) { console.log("验证成功"); } else { console.log("验证失败"); // 阻止表单默认跳转行为 return false; } }); };const reset = function (formEl) { formEl.resetFields(); };</script>

 样式篇

• 初始化样式

html,body { height: 100%; width: 100%;}a { text-decoration: none; }ul {padding:0; }li {list-style: none; }html,body,h1,h2,h3,h4,h5,h6 { padding:0; margin:0; }span {display:inline-block; }

View Code

登录逻辑 

关于token认证

1. 获取token 
2. 保存token
3. 后续携带token

Axios.interceptors.request.use(config => { const token = window.sessionStorage.getItem('token'); if (token) { config.headers.token = token; }return config; }); Axios.interceptors.response.use(response=>{ const {token,code} = response.data; if (token) { window.sessionStorage.setItem('token',token); } }return response; });

View Code

 

标签：Axios,const,element,token,vue,plus
来源： https://www.cnblogs.com/Jishuyang/p/16700801.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。