VueAdmin接口调整

接口处理

移除测试接口服务

//vue.config.js

devServer: {
port: port,
open: true,
overlay: {
  warnings: false,
  errors: true
}
// before: require('./mock/mock-server.js')  //注释掉
},

修改接口地址

# .env.development

# base api
VUE_APP_BASE_API = '/dev-api'

调整接口

// src\api\user.js

export function login(data) {
  return request({
    url: '/vue-element-admin/user/login',  //改成自己的
    method: 'post',
    data
  })
}

接口成功的状态码

// src\utils\request.js
response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      // ...
    } else {
      return res
    }
  },

设置headers

// src\utils\request.js

if (store.getters.token) {
  // let each request carry token
  // ['X-Token'] is a custom headers key
  // please modify it according to the actual situation
  config.headers['X-Token'] = getToken()
  // config.headers['Authorization'] = 'Bearer ' + getToken()
}

后端允许跨域,并且允许前期头携带Authorization

public function handle($request, Closure $next)
{
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Methods: *");
    header("Access-Control-Allow-Headers: Content-Type,Authorization");
    header("Access-Control-Expose-Headers: *");

    return $next($request);
}

如果缺少Authorization,前端携带token请求接口,将报错:Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

登录之后获取用户信息

src\store\modules\user.js

// get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          reject('Verification failed, please Login again.')
        }

        const { roles, name, avatar, introduction } = data

        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        commit('SET_INTRODUCTION', introduction)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

UI内容处理

默认配置

src\settings.js

右侧招聘信息

src\layout\components\Settings\index.vue

<a v-if="isShowJob" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/" target="_blank" class="job-link">
        <el-alert
          title="部门目前非常缺人!有兴趣的可以点击了解详情。坐标: 字节跳动"
          type="success"
          :closable="false"
        />
      </a>

默认固定标签页”文档”移除

src\router\index.js

affix: true

{
    path: '/documentation',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/documentation/index'),
        name: 'Documentation',
        meta: { title: 'documentation', icon: 'documentation', affix: true }
      }
    ]
  },

右上角菜单

src\layout\components\Navbar.vue