登录页面表单验证
验证方法element上有介绍
//在el-form里加上
:rules="rules" ref="ruleForm"
//在el-form-item里定义prop
prop="name"
//1、在data return里定义rules
data{
return {
rules:{
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
}
}
//2、在el-form-item 直接定义
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
//提交时的验证 要把form传过来
this.$refs[form].validate((valid) => {
if (valid) {
}else{
return false;
}
用axios请求登录
//先下载axios
cnpm i axios -s
//在main.js里引入
import axios from "axios";
Vue.prototype.axios = axios
// 统一配置请求地址
let baseURL = ""
axios.defaults.baseURL = baseURL
发送axios验证
//在登录页面发送请求(跟表单验证相结合)
login(form){
//先清除之前的缓存
localStorage.clear();
//表单验证 通过发送请求 否则不发送请求
this.$refs[form].validate((valid) => {
if (valid) {
//发送请求前清空之前全局配置的请求头信息
this.axios.interceptors.request.use(function (config) {
if(1){
config.headers['Authorization'] = '';
}
return config;
}, function (error) {
return Promise.reject(error);
})
//开始配置相关信息准备发送请求
var api='';
var data={}
//发送请求 注意:如果数据格式为formdata格式需要引入Qs对数据进行转换
this.axios.post(api,Qs.stringify(data),{headers:{
'Content-Type':'application/x-www-form-urlencoded'
}}).then((response)=>{
// 如果成功要跳转至首页, 将token保存到localStorage 如果失败显示账号密码错误不进行跳转
if (response.data.data.tokenId !== '') {
**localStorage.setItem('tokenId',response.data.data.tokenId);**
if(response.data.data.classify == "01"){
window.location.href = response.data.data.iscUrl;
}else{
// 请求动态路由接口获取动态导航内容
var api='';
this.axios.get(api).then((response)=>{
var data = response.data.data;
this.menusList=data;
window.sessionStorage.setItem('user',JSON.stringify(data));
MenuUtils(this.$router.options.routes[1].children,data);
// this.$router不是响应式的,所以手动将路由元注入路由对象
// this.$router.options.routes.push(routers);
this.$router.addRoutes(this.$router.options.routes);
this.$router.push({path: '/home'})
}).catch((error)=>{
console.log(error);
this.fullscreenLoading = false;
this.$message.error('获取菜单信息失败!');
})
}
} else {
this.show2=true;
this.fullscreenLoading = false;
this.$message.error('登录失败!');
}
}).catch((error)=>{
this.show2=true;
console.log(error);
})
} else {
return false;
}
});
}
注意:除登录窗口 其他请求都必须设置Authorization = token 保证是在登录且不过期的状态下请求的(token是登录后服务器返回的认证)
用***axios拦截器 ***拦截请求,只要发送请求就会触发这个方法
//在登录时会将token存在本地 在main.js里将token取出来
axios.interceptors.request.use(config=>{
let token = localStorage.getItem('tokenId')
if(token){
config.headers['Authorization'] = token
}
return config
})
路由全局守卫
axios只是拦截请求 路由是不登陆看不到页面
router.beforeEach((to,from,next)=>{
let token = localStorage.getItem('tokenId')
//判断token是否存在 若登录 下一步
if(token){
next()
}else{
//没登陆 判断 是否是login是的话就下一步 不是就跳转至login 实现路由拦截
if(to.path=='/login'){
next()
}else{
next('/login')
}
}
})
导航菜单加载路由
在element导航菜单中 想要开启路由功能 需要将el-menu中的router值设为true 同时菜单项中的index作为path
router和index都需要动态绑定:
//在el-menu里添加
:router="true"
//在菜单项中将index开启路由功能
//问路
:index=" '/home/'+path "
//在router.js的home里添加嵌套路由
{
path:'/home/',
nam:'/home',
component:home,
children:[
{path:'/路径',component:名字,}
]
}
//在相对应的地方添加占位符
<router-view></router-view>