vue-element-admin 人事管理系统 （一）

人事管理系统

首先官网拉取基础模板

1.main.js

2.permission.js

判断权限，根据权限不同配置不同路由，渲染不同界面
控制页面跳转，在此判断有无token
使⽤路由导航守卫router-beforeEach来判断路由跳转是否合理.不合理就重定向；
有令牌时，如果访问登录页则直接跳转到首页next(’/’)
同时，获取用户信息，根据不同用户身份，触发action添加不同路由

3.setting.js

一些基本信息

4.utils/request.js

1.axios拦截器

const service = axios.create({
  // 创建一个新的axios实例
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 超时时间
})

这里的process.env.VUE_APP_BASE_APP来自项目根目录下.env.development和.env.production

2.请求拦截器

为所有请求设置所需请求头（先判断token是否过期）

// request interceptor
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      if (isOut()) {
        store.dispatch('user/logout')
        router.push('/login')
        return Promise.reject(new Error('token过期'))
      }
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

3.响应拦截器

错误处理及数据处理

5.vue.config.js

代理请求解决跨域请求

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
            // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
            '^/api': '' 
        }
      },
    }
  }
}