[JavaScript知识库]vue-element-admin 人事管理系统 （一）

人事管理系统

首先官网拉取基础模板

1.main.js

2.permission.js

使?路由导航守卫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.请求拦截器

为所有请求设置所需请求头

config.headers['X-Token'] = getToken()

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': '' 
        }
      },
    }
  }
}