用Vue2.5和Elemnt-ui2搭建一个后台模版:提升篇（2 登陆、权限）

权限控制

系统权限控制流程

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个不一样岗位的人使用系统，每一个人的权限都会经过后台配置，好比每一个操做按钮，有一个编号，用户登陆后，后台会返回当前用户拥有的全部权限的一个编码数组，从而前端根据数组来进行权限控制。当前简易模版中，没有提供相关代码，因此权限控制您须要结合您公司业务，进行编写。