涉及到不少知识点,关于vue全家桶及其他都用到了,下面是实现功能或者一些想记录的点
1.登录(axios实例和拦截器)
2.动态侧边栏和面包屑(this.$router.options.routes,meta路由元的使用)
3.iconfont的使用
4.页面布局和可复用组件
5.element-ui,js-cookie,一些工具方法的使用
6.vuex模块化和抽离api接口
7.es6/7和webpack的一些语法
实现思路
登录:获取用户表单信息,提交后给后端接口验证,如果匹配则返回一个token,使用cookie存储,再根据token去拉取用户信息接口获取信息,这里的具体操作主要看后端接口如何书写,登录成功后,跳转至主页面。
这里使用自定义配置创建axios实例:axios.create([config]),指定的配置将与实例配置合并:axios#get(url [,config]),这里会配置基本路径和超时时间。使用了axios拦截器,这里使用request拦截器是为了在每个请求头塞入token,好让后端对请求进行权限验证(根据业务而定),response拦截器,当服务端返回特殊的状态码,做统一处理。
axios配置(基准路径,请求拦截,响应拦截)
//1. 导入axios对象
import axios from "axios";
//2. 创建对象实例,create方法
const Server = axios.create({
//请求接口的基础地址
baseURL: 'https://www.liulongbin.top:8888/api/private/v1/',
//设置超时时间
timeout: 5000 // 请求超时,5000毫秒
})
// 请求拦截器
Server.interceptors.request.use(config => {
// 给管理后台的接口设置header头,添加Authorzation属性
let token = sessionStorage.getItem('lc_05B')
config.headers['Authorization'] = token//给header头添加token值
return config
}, error => {
// 出现异常
return Promise.reject(error);
})
// 响应拦截器
Server.interceptors.response.use(response =>{
// 后台正常响应的状态,如果是200, 说明后台处理没有问题
if (response.status == 200) {
return response.data;
}
// return response.data 可以在这里统一的获取后台响应的数据进行返回,而这里面就没有请求头那些
return response
}, error => {
return Promise.reject(error);
})
export default Server // 导出自定义创建 axios 对象
API接口(封装API)
公用组件面包屑的封装(各个组件直接导入即可使用)
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in datalist" :key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: "breadName",
data() {
return {
datalist: [],
};
},
mounted() {
this.datalist = this.$route.meta.bread;
},
};
</script>