表单验证部分使用elementUI里面提供的简单验证办法
<
el-form
:model="
ruleForm2"
:rules="
rules2"
ref=
"ruleForm2"
label-position=
"left"
label-width=
"0px"
class=
"demo-ruleForm login-container"
autocomplete=
"off"
>
<
h3
class=
"title"
>嘻嘻嘻嘻嘻嘻嘻嘻嘻
</
h3
>
<
el-form-item
prop=
"account"
style=
"position:relative"
>
<
el-input
type=
"text"
v-model="
ruleForm2.
account"
auto-complete=
"off"
placeholder=
"账户"
class=
"account"
></
el-input
>
<
i
class=
"account-login"
></
i
>
</
el-form-item
>
<
el-form-item
prop=
"checkPass"
style=
"position:relative"
>
<
el-input
type=
"password"
v-model="
ruleForm2.
checkPass"
auto-complete=
"off"
placeholder=
"密码"
class=
"password"
></
el-input
>
<
i
class=
"password-login"
></
i
>
</
el-form-item
>
<!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> -->
<
el-form-item
style=
"width:100%;"
>
<
el-button
type=
"primary"
style=
"width:100%; padding:13px 15px;font-size:18px"
@click.native.prevent="
handleSubmit2(
'ruleForm2')"
:loading="
logining"
>登录
</
el-button
>
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
</
el-form-item
>
</
el-form
>
通过yapi模拟登录接口 （详情看我博客yapi的简单使用）
然后在api里面新建index.js主要存放调用api请求数据 也是在这里面添加请求拦截器
import
axios
from
'axios'
const
baseURL =
'http://yapi.juwins.com/mock/45/'
axios.
defaults.
baseURL =
baseURL
// 登录验证
export
const
checkUser =
params
=> {
return
axios.
post(
'auth/user/login',
params).
then(
res
=>
res.
data)
}
// 添加请求拦截器
axios.
interceptors.
request.
use(
function (
config) {
// 将token给到一个前后台约定好的key中，作为请求发送
let
token =
localStorage.
getItem(
'mytoken')
if (
token) {
config.
headers[
'Authorization'] =
token
}
return
config
},
function (
error) {
// Do something with request error
return
Promise.
reject(
error)
})
我这里是通过yapi模拟的接口 运用es6语法 以及promise 登录页面 注意把token储存在localStorage中
<
script
>
import {
checkUser }
from
"@/api";
//import NProgress from 'nprogress'
export
default {
data() {
return {
logining:
false,
ruleForm2: {
useraccount:
"",
password:
""
},
rules2: {
useraccount: [
{
required:
true,
message:
"请输入账号",
trigger:
"blur" }
//{ validator: validaePass }
],
password: [
{
required:
true,
message:
"请输入密码",
trigger:
"blur" }
//{ validator: validaePass2 }
]
},
};
},
methods: {
handleReset2() {
this.
$refs.
ruleForm2.
resetFields();
},
handleSubmit2(
formName) {
const
self =
this;
// elementui提供的表单验证
this.
$refs.
ruleForm2.
validate(
valid
=> {
if (
valid) {
var
loginParams = {
useraccount:
this.
ruleForm2.
useraccount,
password:
this.
ruleForm2.
password
};
checkUser(
loginParams).
then(
res
=> {
if(
res.
code ===
200) {
localStorage.
setItem(
'mytoken',
res.
token)//
this.
$router.
push({
path:
'/main'})
this.
logining =
true;
}
else {
// 如果失败，展示提示信息
this.
$message({
type:
'error',
message:
'用户名或密码错误'
})
}
})
}
else {
console.
log(
'校验不通过')
}
});
}
// 动态添加表单图标
// addIconForm(){
// let
// }
}
};
</
script
>
最后在main.js里面 通过router.beforeEach这个钩子函数
// 注册一个全局守卫，作用是在路由跳转前，对路由进行判断，防止未登录的用户跳转到其他需要登录的页面去
router.
beforeEach((
to,
from,
next)
=> {
let
token =
localStorage.
getItem(
'mytoken')
// 如果已经登录，那我不干涉你，让你随便访问
if(
token){
next()
}
else {
// 如果没有登录，但你访问其他需要登录的页面，那我就让你跳到登录页面去
if(
to.
path !==
'/login') {
next({
path:
'/login'})
}
else {
next()
}
}
})