vue登录验证进行路由拦截

表单验证部分使用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-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-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()
}
}
})
 注意 如果按照我这个方式失败了 检查一下依赖包是否都下载

你可能感兴趣的:(vue,的学习)