权限控制

系统权限控制流程

1. 登录、请求拦截 1.1 在路由跳转前（router.beforeEach）的钩子中，获取LocalStorage是否有token值，如果没有直接跳转登录页，如果有将跳转到home页面，

router.beforeEach((to, from, next) => {
  NProgress.start()            // 开启Progress
  if (localStorage.getItem('Authorization')) {
    /**
    在路由跳转前判断，store内是否有用户信息，
    如果store内没有用户信息，在这里发请求，
    并且拉取用户信息，存如store内，
    这样将保证，每次刷新页面会拿到最新的用户信息
  */
  } else {
    next('/login')
  }
})

1.2 用户根据帐号密码进行系统登录，登录成功后后端返回一个tkoen，把token存在本地LocalStorage中。

1.3 axios拦截器中，每次从本地LocalStorage取到之前存的token值，在每次请求发出之前添加到header的Authorization属性中。

// request 请求发送之前 拦截器
service.interceptors.request.use(config => {
  const Authorization = getLocalStorage('Authorization')
  if (Authorization) {
    config.headers.Authorization = Authorization  // 让每个请求携带token--['Authorization']
  }
  return config
}, error => {
  // Do something with request error
  console.log(error)
  Promise.reject(error)
})

1.2 axios拦截器中，每次请求收到后，根据之前的接口约定，进行拦截处理

// request 请求收到后 拦截器设置
service.interceptors.response.use(
  response => {
    if (response) {
      switch (response.data.code) {
        case 'H0000':
          break
        case 'B1000':                                  // 返回 B1000 清除token信息并跳转到登录页面
          sessionStorage.setItem('session_key', null)  // 将token清空
          store.dispatch('LogOut').then(() => {
            location.reload() // 刷新页面
          })
          break
        default:
          Message.error(response.data.data.msg ? response.data.data.msg : '返回状态非H0000')
      }
      return response.data
    } else {
      Message.error('响应成功，但是响应信息不存在！')
    }
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
      }
    }
    Message.error(ENV === 'development' ? '服务器端产生错误！' : '网络因素，请稍后重试！')
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  })

作为一个后台管理系统，权限控制是永远都不能逃避的话题，可能简单的系统，权限控制分管理员、超级管理员，普通用户等几个固定权限。但是由于我司业务繁琐，有20-30个不同岗位的人使用系统，每个人的权限都会通过后台配置，比如每个操作按钮，有一个编号，用户登录后，后台会返回当前用户拥有的所有权限的一个编码数组，从而前端根据数组来进行权限控制。当前简易模版中，没有提供相关代码，所以权限控制您需要结合您公司业务，进行编写。