vue+element-ui 登录预验证，token

1.点击登录时的预验证

• 触发函数调用this.$refs.xxx.validate方法

  this.$refs.loginFormRef.validate((vali, obj) => {
     
        if (!vali) {
     
          return;
        }
    }

2.配置axios发送登录请求

main.js文件：

	//导入axios
	import axios from "axios";
	
	//配置请求的根路径
	axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/";
	
	// 配置axios请求拦截器实现发送请求时携带token
	axios.interceptors.request.use((config) => {
     
	    config.headers.Authorization = window.sessionStorage.getItem("token");
	    return config;
	});
	
	//挂载到原型对象上，便于直接通过this.$http发送请求
	Vue.prototype.$http = axios;

login.vue文件：

	const {
      data: res } = await this.$http.post("/login", this.form);

3.登录成功后token的保存和页面的跳转

login.vue:

	//添加token
	window.sessionStorage.setItem("token",res.data.token)
	//跳转至主页
	this.$router.push('/home')

4.保证每次页面请求时带上token

router.js：

//挂载路由导航守卫
router.beforeEach((to, from, next) => {
     
	//通过to.path获取请求的路径，判断请求的是否为登录页
    if (to.path == "/login") return next();
    //如果请求的不是登录页则判断是否存在token,不存在就跳至登录页
    const token = window.sessionStorage.getItem("token");    
    if (!token) return next("/login");
    next();
});

5.退出登录的操作

login.vue

//清除token
window.sessionStorage.clear()
//跳至登录页
this.$router.push("/login");