vue+element后台管理系统登录

登录页面表单验证

验证方法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:名字,}
  	]
  }
  //在相对应的地方添加占位符