关于vue-element-admin

Question

请教一下，就是前端访问export function getInfo(token) {
  return request({
    url: '/vue-element-admin/user/info',
    method: 'get',
    params: { token }
  })
}这个方法的时候没有任何参数，后台要怎么判断不同用户的身份然后回传此用户所能访问的路由信息

Answer 1

请求param中不是有token字段, 在用户登录时，就把这个token和用户id关联起来，后续通过token去获取关联的用户信息就好了

Answer 2

给你看一下 AntDesignVue Pro 的权鉴部分吧

// 请求拦截器
request.interceptors.request.use(config => {
  const token = storage.get(ACCESS_TOKEN)
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers['Access-Token'] = token
  }
  return config
}, errorHandler)

// 响应拦截器
request.interceptors.response.use((response) => {
  return response.data
}, errorHandler)

// 异常拦截处理器
const errorHandler = (error) => {
  if (error.response) {
    const data = error.response.data
    // 从 localstorage 获取 token
    const token = storage.get(ACCESS_TOKEN)
    // 如果code为403提示没有权限
    if (error.response.status === 403) {
      notification.error({
        message: 'Forbidden',
        description: data.message
      })
    }
    // 如果code为401，并且没有返回值且未登录提示验证失败，并且如果有缓存 token 值，登出并且重新载入页面。
    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
      notification.error({
        message: 'Unauthorized',
        description: 'Authorization verification failed'
      })
      if (token) {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      }
    }
  }
  return Promise.reject(error)
}

你也可以直接看Github仓库上的源码 ant-design-vue-pro/request.js at master · vueComponent/ant-design-vue-pro

这个是前端部分，如果想看完整的前后端代码，可以看一下这个开源项目 JEECG BOOT 低代码开发平台

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。