import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //每次點擊頁面中的刷新按鈕，state中的數(shù)據(jù)就會根據(jù)下面的數(shù)據(jù)重新初始化
    rightList: JSON.parse(sessionStorage.getItem('rightList') || '[]'),
    username: sessionStorage.getItem('username'),
  },
  mutations: {
    setRightList(state, newData) {
      state.rightList = newData
      sessionStorage.setItem('rightList', JSON.stringify(newData)) //sessionStorage只能存儲字符串
    },
    setUsername(state, newData) {
      state.username = newData
      sessionStorage.setItem('username', newData)
    },
  },
  actions: {},
  getters: {},
})

router.beforeEach((to, from, next) => {
      //頁面跳轉之前做攔截動作，判斷token是否存在
      if (to.path === '/login') next()
      else {
        const token = sessionStorage.getItem('token')
        if (!token) next('/login')
        else {
          next()
        }
      }
    })

import Users from '@/components/user/Users.vue'
import Roles from '@/components/role/Roles.vue'
import GoodsCate from '@/components/goods/GoodsCate.vue'
import GoodsList from '@/components/goods/GoodsList.vue'

const userRule = { path: '/users', component: Users }
const roleRule = { path: '/roles', component: Roles }
const goodRule = { path: '/goods', component: GoodsList }
const categoryRule = { path: '/categories', component: GoodsCate }

const routesMap = {
  users: userRule,
  roles: roleRule,
  goods: goodRule,
  categories: categoryRule,
}
export { routesMap }

import Vue from 'vue'
import store from '../store';
import router from '../router';
const permission = {
  inserted(el, binding) {
    //傳過來的參數(shù)中，action表示被綁定的按鈕是什么操作；effect表示當用戶沒有這個操作權限的時候，
    //應該如何如理這個按鈕
    const action = binding.value.action
    const effect = binding.value.effect
    //獲取用戶在當前路由中所具有的權限列表
    let currentPathPermissions = router.currentRoute.meta   
    if(currentPathPermissions.indexOf(action) == -1){
      if(effect === 'disabled'){
        el.disabled = true
        el.classList.add('is-disabled') //element-ui需要的處理
      }
      else
        el.parentNode.removeChild(el)
        //el.style.display = 'none'
    }
  }
}
Vue.directive('permission', permission)

//當前模塊中具備的權限關系映射
const actionMapping = {
  get: 'view', //查看-->get請求
  post: 'add', //添加-->post請求
  put: 'edit', //編輯-->put請求
  delete: 'delete', //刪除-->delete請求
}
//請求攔截控制
axios.interceptors.request.use((request) => {
  // console.log(request.url);
  // console.log(request.method);
  if (request.url !== 'login') {
    //除了登錄請求以外，在請求頭中全部添加上token
    request.headers.Authorization = sessionStorage.getItem('token')
    //將請求方式映射成為操作類型的權限
    const action = actionMapping[request.method]
    //獲取用戶在當前路由下所具有的權限
    const currentRight = router.currentRoute.meta
    if (currentRight && currentRight.indexOf(action) === -1) {
      //沒有權限發(fā)送請求，通過報錯攔截
      alert('沒有權限！')
      return Promise.reject(new Error('沒有權限'))
    }
  }
  return request
})

axios.interceptors.response.use((response) => {
  if (response.data.meta.status === 401) {
    //返回401表示token失效，返回登陸界面
    router.push('/login')
    sessionStorage.clear()
    window.location.reload()
  }
  return response
})