[VUE学习]权限管理系统前端vue实现8-右上角用户头像显示实现

雨点打透心脏的1/2处 2024-04-20 22:12 35阅读 0赞

## 1.现在有个问题 我们再没有token情况下通过url可以直接访问页面 这不可以 所以我们需要添加路由守卫 拦截 ##

![268c435a2a4b4550b73b0f1015006590.png][]

## 2.permission.js的代码 ##

import router from "@/router/index"
    import store from "@/store"
    
    router.beforeEach((to,from,next)=>{
        const whiteList=['/login'] // 白名单
        let token=store.getters.GET_TOKEN;
        if(token){
            next();
        }else{
            if(whiteList.includes(to.path)){
                next();
            }else{
                next("/login");
            }
        }
    })

## 3.之后再main.js里面引入 使其生效 ##

![1b874465a295402a951e950134af1e7a.png][]

## 4.补充知识 后面动态路由那里也会有这个问题 ##

beforeEach((to, from, next) => {
    	to // 要去的路由
    	from // 当前路由
    	next() // 放行的意思
    }

**next(‘/logon’) 、 next(to) 或者 next(\{ …to, replace: true \})**

在路由守卫中，**只有next()是放行**，其他的诸如：next(‘/logon’) 、 next(to) 或者 next(\{ …to, replace: true \})都不是放行，**而是：中断当前导航，执行新的导航**

### 在守卫中我使用next(‘/logon’）执行过程 ###

他不是直接放行 二十一致循环下去

beforeEach((to, from, next) => {
      beforeEach(('/logon', from, next) => {
      	 beforeEach(('/logon', from, next) => {
      	 	 beforeEach(('/logon', from, next) => {
      	 	 	beforeEac...  // 一直循环下去...... , 因为我们没有使用 next() 放行
     		}
     	 }
      }
    }

beforeEach((to, from, next) => {
       if(to.path === '/home') {
       	next('/logon')
       } else {
        // 如果要去的地方不是 /home ， 就放行
       	next()
       }
    }
    
    
    
    实际执行
    beforeEach((to, from, next) => {
       beforeEach(('/logon', from, next) => {
         next()  // 现在要去的地方不是 /home ， 因此放行
       }

**正以为如此很多人在使用动态添加路由addRoutes()会遇到下面的情况：**  
在addRoutes()之后第一次访问被添加的路由会白屏，这是因为刚刚addRoutes()就立刻访问被添加的路由，然而此时addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。

**该如何解决这个问题 ?**  
此时就要使用next(\{ …to, replace: true \})来确保addRoutes()时动态添加的路由已经被完全加载上去。

next(\{ …to, replace: true \})中的**replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。**

因此next(\{ …to, replace: true \})可以写成next(\{ …to \})，不过你应该不希望用户在addRoutes()还没有完成的时候，可以点击浏览器回退按钮搞事情吧。

**其实next(\{ …to \})的执行很简单，**它会判断：

**如果参数to不能找到对应的路由的话，就再执行一次beforeEach((to, from, next)直到其中的next(\{ …to\})能找到对应的路由为止。**

也就是说此时addRoutes()已经完成啦，找到对应的路由之后，接下来将执行前往对应路由的beforeEach((to, from, next) ，因此需要用代码来判断这一次是否就是前往对应路由的beforeEach((to, from, next)，如果是，就执行next()放行。

**如果守卫中没有正确的放行出口的话，会一直next(\{ …to\})进入死循环 !!!**

因此你还需要确保在当addRoutes()已经完成时，所执行到的这一次beforeEach((to, from, next)中有一个正确的next()方向出口。

[268c435a2a4b4550b73b0f1015006590.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/427cdda5c4884b43b95b8c9e0415a61d.png
[1b874465a295402a951e950134af1e7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/306235ed92d544dd82a35abedd6d2504.png