Analysis of Vue element background authentication process

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 defaultRoute = [ //Array of fixed partial permissions, routes accessible to all users {
		path:'/login',
		component:aa
	},
]

export const asyncRoute = [ //Dynamically configured routing table, needs to be filtered before working {
		path:'/order',
		name:'order',
		component:aa,
		meta:{
			system:'order'
		}
	}
	{
		path:'/roles',
		name:'roles',
		component:aa,
		meta:{
			system:'roles'
		}
	}
]

//Register routing table const createRouter = () => new Router({
	  // mode: 'history', // require service support
	  scrollBehavior: () => ({ y: 0 }),
	  routes: constantRoutes
})
const router = createRouter()

//Reset the routing worksheet. This method needs to be called when logging out. 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' // Custom encapsulation method for accessing tokens Route.beforeEach((to,from,next) =>{
	//Get the token to determine whether the user is logged in const hasToken = getToken() 
	if (hasToken ) {
	//Judge whether the user has logged in if (to.path === "/login") {
			/**
			*The user has logged in, but is still routed to the login page, which means that the user has performed the logout operation, so this place can clear the token or write some custom logic */
			next()
		}else{
		/**
		*Here is the case where the user has logged in or clicked the login button, the token has been stored in localstorage, but it is not routed to login. If there is no route to /login, then just let it go. Here I handle some things, that is, since the user has logged in and can be directly released, before we release it, we need to do some logic here, that is, to judge the user's permissions, and then filter out the routes in our dynamically configured routing table that meet his permissions based on the user's permissions, and then insert them into the routing configuration table for use. *
		* Then there are two issues involved:
		*1: When to process dynamic routing (after logging in, before entering the home page, that is, before *next)
		*2: What conditions handle dynamic routing */
		
		/**
		*Here you can first check whether the length of the user permission list in the store is 0. If the length is 0, it means that the user * has just clicked the login button but has not entered the page. At this time, you need to do some permission filtering.	
		*If the length is not 0, it means that the authentication process is fine, just go to the corresponding component directly *This step is mainly to prevent repeated filtering of the array and save performance */
			if (store.getters.roles.length > 0) {
				next()
			}else{
				//If the code reaches this point, it means the user is logged in. And the authentication process has not yet started.
				//Then you need to go through the authentication process here store.dispatch('getRoles').then(res=>{
					//The res here is the resolve in the peomise in the third step //which is the array of permission information store.dispatch('createRouters',res.data)
					.then(res=>{
						//This is the function that calls the store to create dynamic routes. You can pass the //permission array to this function, or you can pass it here. //This function directly gets the value of roles in your state in the same way. let addRouters = store.getters('addRouters')
						let allRouters = store.getters('allRouters')

						//Add the dynamic routing part to the working route router.addRoutes(accessRoutes)
						//Go to the intercepted page next({ ...to, replace: true })
					})	
				})
			}
		}
	} else {
		/**Here is to handle the situation where there is no token, that is, the user has not logged in at this time. If there is no user logged in, then determine whether the user goes to the login page. If it is the login * page, let it go directly. If the user wants to visit the homepage without logging in, let * him redirect to the login page */
		if (to.path == '/login') {
			//This place can be judged more carefully. It is not necessary to let him go directly when logging in, but //When going to all public components, let him go directly next()
		}else{
			next('/login')
		}
	}
}) 

//Define an interface for obtaining the user's permissions in the api folder and call it in this actionsimport { getUserRole } from "../api/getRoles" //Interface for obtaining permissionsimport { logout } from '../api/user' //Interface for user logoutimport { resetRouter } from './router'
import { removeToken } from '@/utils/auth' // Custom encapsulation method to clear token //This is a method to filter arrays. If the routing table is nested in multiple layers, you can recursively call this method to filter the array //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
//}

//Introduce default routing and dynamic routing import { defaultRoute , asyncRouter } from '@/router'
const state = {
	roles: [] //The permission list obtained by the interface, assuming the data format is: ["order", "roles"],
	allRouters: [], //This is the final working route after all integration addRouters: [], //This is the route that is filtered out according to the dynamic matching of permissions}
	  
const getters = {
	/**Store the roles in the state in this getters, then other places that get the roles in this getters, as long as the original roles change, the roles in other places will also change, which is equivalent to computed properties */
	roles:state => state.roles
	allRouters:state => state.allRouters
	addRouters:state => state.addRouters
}
const mutations: {
	/**In the following actions, submit the array of permission information to this place through commit, and then *this place submits the array to the roles of state
	*/
	SetRoute(state,router)
		//The router here is the routing table filtered according to user permissions state.allRouters = defaultRoute.concat(router)
		state.addRouters = router
	}
	//Store the routing permission array in state
	setRoles(state,value){
		state.roles = value
	}
}
const actions: {
	//Write a request to get the permissions of the currently logged in role, such as ["/order","roles"]. If the request //comes back like this, it means that the permissions of this role are to access the order route and //roles route	
	// There are two possible situations for obtaining permission information: except for the following permission information, which is a separate interface.
	//Permission information may also be returned along with the user login interface //Get the current user's permission information and store it in the state. This permission information may be communicated with the back //end. It will not be written as a separate interface for you to request. Instead, when you log in, the user information and the user's permission information will be returned to you at once. Then, when the user logs in, the permission information will be stored in the state. //The purpose is to store the array of permission information in the state. //Get roles permission method getRoles({commit},data){
		return new Promise(resolve,reject){
			//Call to get user rights interface getUserRole().then(res =>{
				//The data returned here should be an array of permission information, such as: ["order", "roles"]
				//Store the permission information into the state through mutations
				commit('setRoles',res.data)
				resolve(res.data)
			})
		}
	})
	//Method to filter array configuration table based on permissions createRouters({ commit } , data ){
		return new Promise((resolve,reject) => {
			let addRouters = [ ] 
			if (data.includes("admin") {
				addRouters = asyncRouter
			}else{
				// In project development, the routing array may be nested in multiple layers, so this place needs to use the custom method above	
				//Method to filter recursively, this demo only processes one layer of array //(filterAsyncRoutes) method addRouters = asyncRouter.filter(item=>{
					if (data.includes(item.meta.system) ) {
					   	return item
					}
				})
			}
			
			
			//Pass the matched permission route to mutations, and let mutations
			//Save the matched route into state
			commit.("SetRoute",addRouters)
			resolve() //This is where you need to call resolve so that outsiders can get the callback of successful array filtering through //.then })
	},
	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){
			//Logout successful }
	}catch{
		//Logout failed (error)
	}
}