后台管理api封装

1.完成登录功能

1.1 表单重置

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

1.2 表单预检验

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

1.3 封装登录接口

封装方法参考微信小程序的封装

1.3.1 封装环境地址

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;

1.3.2 封装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;

1.3.3 封装项目接口

import request from './request'


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

页面鉴权：

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

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

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

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

代码如下：

//路由守卫
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})

2.首页布局

2.1 Container 布局容器

1. el-container

2. el-header

3. el-aside：溢出问题解决，去掉el-menu右侧边框

   .el-menu {
     border-right:none;
   }
   

4. el-main

5. el-footer

6. el-menu

el-header中的退出登录
思路：
第一步:清除token
第二步：跳转到登录页