export default new  Router(｛ 
routes：[
   ｛
		path:'/login',
		name:'login',
		component:aa
	｝，
	｛
		path：'/home',
		name:'home',
		component:cc
	｝，
	]
｝)

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const defauleRoute = [ //固定部分權(quán)限的數(shù)組，所有用戶都能訪問(wèn)的路由
	｛
		path:'/login',
		component:aa
	｝,
]

export const  asyncRoute = [ //動(dòng)態(tài)配置的路由表，工作之前需要過(guò)濾
	{
		path:'/order',
		name:'order',
		component:aa,
		meta:{
			system:'order'
		}
	}
	{
		path:'/roles',
		name:'roles',
		component:aa,
		meta:{
			system:'roles'
		}
	}
]

//注冊(cè)路由工作表
const createRouter = () => new Router({
	  // mode: 'history', // require service support
	  scrollBehavior: () => ({ y: 0 }),
	  routes: constantRoutes
})
const router = createRouter()

//重置路由工作表，退出登錄的時(shí)候需要調(diào)用此方法
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher 
}

export default router

import router from './router'
import store from './store'
import { getToken } from '@/utils/auth' // 自定義封裝存取token的方法

Route.beforeEach((to,from,next) =>{
	//取token，判斷用戶是否已登錄
	const  hasToken = getToken() 
	if(hasToken ){
	//判斷用戶已登錄
		if（to.path === "/login"）{
			/**
			*用戶已經(jīng)登陸，但是還路由到login頁(yè)面，這代表用戶已經(jīng)執(zhí)行了退出登錄的操
			*作，所以這個(gè)地方可以清一下token之類(lèi)的，或者自定義寫(xiě)一些邏輯
			*/
			next()
		}else{
		/**
		*這里是已經(jīng)登錄或者點(diǎn)擊了登錄按鈕，token已經(jīng)存入localstorage，但是但是不路
		*由到login的情況如果沒(méi)有路由到/login，那么就直接讓他放行就行，在這里面我處
		*理一些東西，就是用戶既然已經(jīng)登陸，并且可以直接放行，那么我們放
		*行之前，在這個(gè)地方需要做一些邏輯，就是判斷用戶的權(quán)限，然后根
		*據(jù)用戶的權(quán)限，把我們的動(dòng)態(tài)配置的路由表中符合他權(quán)限的那幾條路
		*由給過(guò)濾出來(lái)，然后插入到路由配置表中去使用
		*
		*那么就涉及到兩個(gè)問(wèn)題：
		*1:什么時(shí)候去處理動(dòng)態(tài)路由（登陸之后，進(jìn)入到首頁(yè)之前，也就
		*是next之前）
		*2:什么條件處理動(dòng)態(tài)路由
		*/
		
		/**
		*這地方可以先判斷一下store中的用戶權(quán)限列表長(zhǎng)度是否為0，若長(zhǎng)度為0，則代表用戶
		*是剛點(diǎn)擊了登錄按鈕，但是還沒(méi)有進(jìn)入到頁(yè)面，這時(shí)候需要再去做一些權(quán)限過(guò)濾之類(lèi)的	
		*操作如果長(zhǎng)度不為0代表鑒權(quán)流程都沒(méi)問(wèn)題了，直接前往對(duì)應(yīng)的組件就行
		*這一步主要是為了防止重復(fù)過(guò)濾數(shù)組，節(jié)約性能
		*/
			if(store.getters.roles.length > 0){
				next()
			}else{
				//代碼如果走到了這個(gè)地方，代表用戶是已登錄。并且鑒權(quán)流程還沒(méi)走，
				//那么在這地方就需要去走鑒權(quán)流程
				store.dispatch('getRoles').then(res=>{
					//這個(gè)地方的res是第三步那個(gè)地方的peomise中的resolve傳
					//過(guò)來(lái)的，也就是權(quán)限信息的那個(gè)數(shù)組
					store.dispatch('createRouters',res.data)
					.then(res=>{
						//這里是調(diào)用store創(chuàng)造動(dòng)態(tài)路由的那個(gè)函數(shù),這個(gè)地方可以把那
						//個(gè)權(quán)限數(shù)組傳到這個(gè)函數(shù)內(nèi)部，或者不在這里傳，這個(gè)
						//函數(shù)內(nèi)部直接去取自己state里面的roles的值也是一樣的
						let  addRouters = store.getters('addRouters')
						let  allRouters = store.getters('allRouters')

						//添加動(dòng)態(tài)路由部分到工作路由
						router.addRoutes(accessRoutes)
						//前往攔截的頁(yè)面
          				next({ ...to, replace: true })
					})	
				})
			}
		}
	} else {
		/**這里是處理沒(méi)有token的情況，也就是說(shuō)這時(shí)候用戶還沒(méi)有登陸，那
		*如果沒(méi)用戶登錄，那么判斷用戶是不是去登錄頁(yè)面，如果是登錄
		*頁(yè)面，就直接放行，如果沒(méi)登陸就想去訪問(wèn)主頁(yè)那種頁(yè)面，就讓
		*他重定向到登錄頁(yè)面
		*/
		if（to.path == '/login'）{
			//這地方可以判斷的仔細(xì)一點(diǎn)，不一定是去login的時(shí)候再讓他直接放行，而是
			//前往所有公共組件的時(shí)候，都直接讓他放行
			next()
		}else{
			next('/login')
		}
	}
})

//在api文件夾中定義一個(gè)獲取此用戶的權(quán)限的接口，并且在這個(gè)actions中調(diào)用
import { getUserRole } from "../api/getRoles"  //獲取權(quán)限的接口
import { logout } from '../api/user'   //用戶退出登錄的接口
import { resetRouter } from './router'
import { removeToken } from '@/utils/auth' // 自定義封裝清除token的方法

//這個(gè)是過(guò)濾數(shù)組的方法，如果路由表是多層嵌套的，那么可以遞歸調(diào)用這個(gè)方法去過(guò)濾數(shù)組
//function hasPermission(roles, route) {
//  if (route.meta && route.meta.roles) {
//    return roles.some(role => route.meta.roles.includes(role))
//  } else {
//    return true
//  }
//}

//export function filterAsyncRoutes(routes, roles) {
//  const res = []

//  routes.forEach(route => {
//    const tmp = { ...route }
//    if (hasPermission(roles, tmp)) {
//      if (tmp.children) {
//        tmp.children = filterAsyncRoutes(tmp.children, roles)
//      }
//      res.push(tmp)
//    }
//  })
//
//  return res
//}

//引入默認(rèn)路由以及動(dòng)態(tài)路由
import  { defauleRoute , asyncRouter }  from '@/router'
const state = {
	roles：[]    //掉接口拿到的權(quán)限列表，假設(shè)數(shù)據(jù)格式為：["order","roles"],
	allRouters: [], //這個(gè)是全部整合以后，最終要工作的路由
	addRouters: [],//這個(gè)是根據(jù)權(quán)限動(dòng)態(tài)匹配過(guò)濾出來(lái)部分的路由
}
	  
const getters = {
	/**把state中的roles存入到這個(gè)getters中，那么其他獲取這個(gè)getters中的
	*roles的地方，只要原本的roles發(fā)生改變，其他地方的這個(gè)roles也就會(huì)發(fā)生
	*改變了，這個(gè)相當(dāng)于是computed計(jì)算屬性
	*/
	roles:state => state.roles
	allRouters:state => state.allRouters
	addRouters:state => state.addRouters
}
const mutations：{
	/**在下面的actions里面通過(guò)commit把權(quán)限信息的數(shù)組提交到這個(gè)地方，然后
	*這個(gè)地方把數(shù)組提交到state的roles
	*/
	SetRoute（state,router）
		//這個(gè)地方的router就是根據(jù)用戶權(quán)限，過(guò)濾出來(lái)的路由表
		state.allRouters = defauleRoute.concat(router)
		state.addRouters = router
	}
	//把路由權(quán)限數(shù)組存儲(chǔ)到state
	setRoles(state,value){
		state.roles = value
	}
}
const actions：{
	//寫(xiě)一個(gè)獲取當(dāng)前登陸角色權(quán)限的請(qǐng)求，比如["/order","roles"]，如果請(qǐng)求回
	//來(lái)的是這樣的，那么就代表這個(gè)角色的權(quán)限就是可以訪問(wèn) order路由以及
	//roles路由
	
	//獲取權(quán)限信息可能有兩種情況：除了下面這種權(quán)限信息是一個(gè)單獨(dú)的接口，
	//權(quán)限信息也可能跟著用戶登陸的接口就一并返回
	//獲取當(dāng)前用戶的權(quán)限信息，并且存入到state中，這個(gè)權(quán)限信息，可能跟后
	//端在溝通的時(shí)候，他不會(huì)單獨(dú)寫(xiě)成一個(gè)接口給你去請(qǐng)求，而是你在登陸請(qǐng)求
	//的時(shí)候就把用戶信息和這個(gè)此用戶的權(quán)限信息都一次性返回給你了，那就在
	//用戶登陸的時(shí)候就把這個(gè)權(quán)限信息存入到這個(gè)state中，也一
	//樣的，目的就是要把權(quán)限信息的數(shù)組存入到state中就行
	//獲取roles權(quán)限方法
	getRoles({commit},data){
		return new Promise(resolve,reject){
			//調(diào)用獲取用戶權(quán)限接口
			getUserRole().then(res =>{
				//這里返回的數(shù)據(jù)應(yīng)該是一個(gè)權(quán)限信息的數(shù)組，如:["order","roles"]
				//把權(quán)限信息通過(guò)mutations存入到state
				commit('setRoles',res.data)
				resolve(res.data)
			})
		}
	})
	//根據(jù)權(quán)限過(guò)濾數(shù)組配置表的方法
	createRouters({ commit } , data ){
		return new Promise((resolve,reject) =>{
			let addRouters =  [ ] 
			if（data.includes("admin"）{
				addRouters = asyncRouter
			}else{
				//項(xiàng)目開(kāi)發(fā)中路由數(shù)組可能是多層嵌套，那么這地方需要用上面自定義的方	
				//法通過(guò)遞歸的方式去過(guò)濾，此demo就只按一層數(shù)組處理
				//（filterAsyncRoutes）方法
				addRouters = asyncRouter.filter(item=>{
					if(data.includes(item.meta.system) ){
					   	return item
					}
				})
			}
			
			
			//把這個(gè)匹配出來(lái)的權(quán)限路由傳到mutations中，讓mutations
			//把這個(gè)匹配出來(lái)的路由存入到state
			commit.("SetRoute",addRouters)
			resolve()  //這個(gè)地方要調(diào)用一下這個(gè)resolve，這樣外面訪可以通過(guò)
					   //.then拿到數(shù)組過(guò)濾成功的回調(diào)
		})
	},
	logout({ commit }) {
	    return new Promise((resolve, reject) => {
	      logout().then(() => {
	        removeToken() // must remove  token  first
	        resetRouter()
	        commit('setRoles', [])
	        commit('SetRoute', [])
	        resolve()
	      }).catch(error => {
	        reject(error)
	      })
	    })
  },
}
export default {
	state,
	getters,
	mutations,
	actions
}

async function logout(){
	try{
		const res = await store.dispatch.logout()
		if(res.code == 200){
			//退出登錄成功
		}
	}catch{
		//退出登錄失?。ǔ鲥e(cuò)了）
	}
}