没有合适的资源?快使用搜索试试~ 我知道了~
首页vue+vuex+axios实现登录、注册页权限拦截
资源详情
资源评论
资源推荐
vue+vuex+axios实现登录、注册页权限拦截实现登录、注册页权限拦截
下面小编就为大家分享一篇vue+vuex+axios实现登录、注册页权限拦截,具有很好的参考价值,希望对大家有
所帮助。一起跟随小编过来看看吧
在GitHub上有很多写好的模板,这个项目也是基于模板做的。
现在记录一下我做的过程现在记录一下我做的过程
1、修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分
BASE_API: '"http://192.168.xx.xx"',
2、接下来就是操作src文件,先在 views里写好vew组件(login.vue,regist.vue),写好到router里的index.js里配置好路径
login.vue
<template>
<div class="login-container">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
label-width="0px"
class="card-box login-form">
<h3 class="title">登录</h3>
<el-form-item prop="name">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user"/>
</span>
<el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete="on"
placeholder="用户名"/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
autoComplete="on"
placeholder="密码"></el-input>
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye"/></span>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
if (value.trim().length<1) {
callback(new Error('用户名不能为空'))
} else {
callback()
}
};
const validatePass = (rule, value, callback) => {
if (value.trim().length < 1) {
callback(new Error('密码不能为空'))
} else {
callback()
}
};
return {
loginForm: {
name: '',
password: ''
},
loginRules: {
name: [{required: true, trigger: 'blur', validator: validateUsername}],
password: [{required: true, trigger: 'blur', validator: validatePass}]
},
loading: false,
pwdType: 'password'
}
},
weixin_38603204
- 粉丝: 3
- 资源: 973
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- ExcelVBA中的Range和Cells用法说明.pdf
- 基于单片机的电梯控制模型设计.doc
- 主成分分析和因子分析.pptx
- 共享笔记服务系统论文.doc
- 基于数据治理体系的数据中台实践分享.pptx
- 变压器的铭牌和额定值.pptx
- 计算机网络课程设计报告--用winsock设计Ping应用程序.doc
- 高电压技术课件:第03章 液体和固体介质的电气特性.pdf
- Oracle商务智能精华介绍.pptx
- 基于单片机的输液滴速控制系统设计文档.doc
- dw考试题 5套.pdf
- 学生档案管理系统详细设计说明书.doc
- 操作系统PPT课件.pptx
- 智慧路边停车管理系统方案.pptx
- 【企业内控系列】企业内部控制之人力资源管理控制(17页).doc
- 温度传感器分类与特点.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0