一、首先了解什么是beforeEach(不说大话,白话浅显易懂版本,下面的代码不是按顺序来的,分开解释每个部分,最后会补上所有代码)
beforeEach:vue中每次路由变化都会进入的一个东西,可以在里面拿到三个参数,to,from.next,to是去哪,from是从哪来,next是用来放行的。
如果想知道参数里面有什么东西,可以代码里面debugger,自己去看看他具体的实例属性,这里就不解释了。
解释一下逻辑吧,进去beforeEach后,我这里第一个if是去判断登录的,和权限没太大关系,我写了一个checkUserAuthentication方法去判断是否登录了,就只是判断了一个token而已。下面的else if中,to会拿到我来之前的路由里面的配置项,这个Meta就是一个路由中的配置,除了路由自己的位置,你其他想要配置的数据都应该放到Meta里面去,我就配置了一个roles,一个数组去存这个路由下面的路由有哪些,比如你这个路由,管理员可以访问,用户也可以访问,然后里面的if,就是判断当前要去的那个路由的roles数组里面是否包含了我登录后,存储的用户权限,如果有,那就放行,没有就去403页面,说明当前用户没有访问那个路由的权限,用join是因为我存登录后的数据,使用的数组,所以这里要用join去吧那个数组&#x