vue+element axios重新封装+简易权限验证+keepalive缓存+表格搜索与删除功能

axios重新封装

// index.js
import axios from 'axios'

var instance = axios.create({
    baseURL: '******',
    timeout: 3000
})

instance.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 此处token一般是用户完成登录后储存到localstorage里的
        localStorage.token && (config.headers.Authorization = localStorage.token)
        return config
    },
    error => {
        return Promise.error(error)
    })

instance.interceptors.response.use(
    response => {
        return response
    },
    error => {
        return Promise.error(error)
    })

// { path, params = {}, method = 'get', data = {} } = {} 
// 前一个{}对形参进行解构，设置四个属性默认值
// 后一个{}设置形参的默认值
export const httpServe = ({ path, params = {}, method = 'get', data = {} } = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            url: path,
            params,
            method,
            data
        })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}

// request.js
import {httpServe} from '@/http/index.js'

// 登录请求
export const loginPost = (data={})=> httpServe({path:'login',method:'post',data})
// 左侧菜单列表
export const menusGet = (params={})=>  httpServe({path:'menus',params})
// 用户列表
export const usersGet = (params={})=>  httpServe({path:'users',params})
// 添加用户
export const addusersPost = (data={})=> httpServe({path:'users',method:'post',data})
// 删除用户
export const usersDelete = (id)=> httpServe({path:'users/'+id,method:'delete'})

简易权限认证

// 通过路由守卫，在前往非登录页面并且token不存在时，给出提示并重定向跳转至登录页面
router.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !localStorage.token) {
    Message.warning('请先登录');
    next({ name: 'login' });
  }
  else next()
})

keepalive缓存

<!-- 缓存路由组件 -->
<!-- 通过 $route.meta.keepAlive 判断组件是否需要被缓存 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

{
    path: '/index',
    name: 'index',
    component: () => import('../views/IndexView'),
    redirect:'/index/users',
    children:[
      {
        path: 'users',
        name: 'users',
        meta:{
          title:'用户管理',
          subTitle:'用户列表',
          keepAlive:true
        },
        component: () => import('../views/UsersView')
      },
}

表格搜索与删除功能

// 搜索功能  getTableData是从后台获取数据的函数
<el-row>
  <el-input v-model="queryName" style="width:200px;margin-right:15px;" 
  placeholder="搜索用户名" @keyup.native.enter="getTableData"></el-input>
  <el-button icon="el-icon-search" circle @click="getTableData"></el-button>
</el-row>

// 删除功能
// 通过作用域插槽插入删除按钮，并传入表格一行的数据
<el-table-column
    fixed="right"
    label="操作"
    width="100">
    <template slot-scope="scope">
      <el-button @click="delUsers(scope.row.id)" type="text" size="small">删除</el-button>
    </template>
</el-table-column>

async delUsers(id){
  // console.log(id);
  try {
    // usersDelete 是封装好的调用删除单个用户api接口的函数，传入要删除的用户 id 即可
    let res = await usersDelete(id);
    let {meta:{msg,status}} = res.data;
    if(status==200){
      this.$message.success(msg);
      this.getTableData()
    }else{
      this.$message.error(msg)
    }
  } catch (error) {
    this.$message.error(error)
  }
},