Vue电商管理 第二弹 =＞＞＞手把手教你写登录页面，路由守卫(js部分)

一.完成登录功能

1.表单重置

//第一步：给表单添加ref
<el-form ref="loginForm"></el-form>
	 
//第二步：给重置按钮添加事件，调用重置方法
			//重置表单
 resetForm() {
     this.$refs.loginForm.resetFields()
 }

2.表单校验

    async login(username,password) {
    //传递username和password参数
    //try,catch
      try {
     		 //	检验表单数据
        this.$refs.loginForm.validate();
        try {
        	//解构结果赋值给result
          const result = await this.$axios.login(this.loginForm);
          console.log(this.loginForm);
          //跳转首页
          //可以用this.$message.success提示框提示
          this.$router.push('/user/index')
        } catch (e) {
          this.$message.error(e, { delay: 1000 });
        }
      } catch (e) {
        this.$message.error(e);
      }
    },

3.封装接口地址

axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/';

4.封装axios，拦截器和项目接口

1.axios封装和拦截器

import axios from 'axios';
//基准地址
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/';

axios.interceptors.request.use(config => {
			//header头添加Authorizationtoken
    			//绘画存储
    config.headers['Authorization'] = sessionStorage.getItem('token');
    return config;
})

axios.interceptors.response.use(config => {
    console.log(config)
    //解构meta
    const { data: { meta: { status, msg }, data: data1 } } = config;
    switch (status) {
        //状态码为200，201,204并且有token时请求接口
        case 200:
        case 201:
        case 204:
            data1 && data1.token && sessionStorage.setItem('token', data1.token);
            return Promise.resolve({ data1, msg });
        default:
            return Promise.reject(msg);
    }
})

2.封装项目接口

export default {
    //抛出一个登录方法，
    		//传递username和password参数
    login({username,password}){
        return axios.get('login',{
            username,password
        })
    },
}

3.路由守卫(登录)

router.beforeEach((to,from,next)=>{
    //如果要去首页
  if(to.path == '/admin/index'){
      //检测token
    if(sessionStorage.getItem('token') == null){
        //没有token请先登录
        //返回登录页面
      alert('请先登录');
      next('/admin/login')
    }else{
        //其他情况，（有token）放行
      next()
    }
  }
  if(to.path == '/admin/login'){
      //如果要去登录
    if(sessionStorage.getItem('token') !== null){
        //检测token
        //有token
        //返回首页
      next('/admin/index')
    }else{
        //放行
      next()
    }
  }
})