axios.完成登录功能

表单重置

第一步：给表单添加ref

第二步：给重置按钮添加事件，调用重置方法
//重置表单
resetForm() {
this.$refs.loginForm.resetFields()
}

表单预检验
//用户登录
loginIn() {
//对表单对整体合法性检验
this.$refs.loginForm.validate((valid)=>{
//console.log(valid)
//如果表单有不合法的字段，直接返回
if(!valid) return;
})
}

封装登录接口

封装环境地址

const env = {
    //线上环境
    prod: {
        baseURL:'https://www.liulongbin.top:8888'
    },
    //开发环境
    dev: {
        baseURL:'https://www.dev.top:8888/'
    },
    //测试环境
    test: {
        baseURL:'https://www.test.top:8888/'
    }

}

export default env;

封装axios

//引入axios
import axios from 'axios'
//引入Elment UI 组件
import { Message} from 'element-ui'
//引入env.js
import baseURL from './env'

//封装axios请求

//创建axios实例
const service = axios.create({
    //axios请求基地址
    baseURL: `${baseURL.prod.baseURL}/api/private/v1`,
    timeout: 2000,
  });


//添加请求拦截
service.interceptors.request.use(function (config) {
  console.log('请求拦截:', config)
  if(config.url!=='/login') {
    //获取token传递给请求头
    const token = sessionStorage.getItem('token')
    //配置请求头
    if (token) {
      config.headers['Authorization']=token
     }

  }
    return config;
  }, function (error) {
    //请求报错
    return Promise.reject(error);
  });



//请求响应拦截
service.interceptors.response.use(function (response) {
    //成功返回
  console.log('响应拦截：', response)
  const res = response.data;
  const resultOk = [200, 201, 204]
  if (resultOk.includes(res.meta.status)) {
   
     //轻提示
    Message({
      message: res.meta.msg,
      type: 'success'
     })
    //成功返回
      return res.data

  }
   
    return Promise.reject('返回数据有误，请检查');
}, function (error) {
    //失败返回
    return Promise.reject(error);
});
  

export default service;

封装项目接口

import request from './request'


//封装登录接口
export function login(data) {
    return request({
        url: '/login',
        method: 'POST',
        data
    })
}

页面鉴权：

1.通常需求鉴权页面通过路由设置meta

2.路由守卫：拦截要跳转的路由有没有meta为auth标识

记住上次访问的地址，登录后再重新回到上次访问地址

思路：跳转到登录页时，将要访问的页面地址当作参数传给登录页，登录成功后，再跳回原页面

//路由守卫
router.beforeEach((to,from,next) => {
  console.log('to:', to)
  //第一步：是否需要鉴权
  let flag = to.matched.some(item => item.meta.auth)
  if (flag) {
    //第二步：获取token
    const token = sessionStorage.getItem('token');
    if (!token) {
      return next({
        //要跳转的路由
        path: '/login',
        //通过query携带要传递的参数,query是一个对象
        query: {
          redirect:to.fullPath
        }
     })
    }
    //有token,就直接放行
    next()

  } else {
    next()
  }

  
  
})

在组件中：
  let {redirect}=this.$route.query
  this.$router.push({path:redirect})