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

这篇具有很好参考价值的文章主要介绍了[VUE学习]权限管理系统前端vue实现8-右上角用户头像显示实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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里面引入使其生效

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

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()方向出口。文章来源地址https://www.toymoban.com/news/detail-541121.html

到了这里，关于[VUE学习]权限管理系统前端vue实现8-右上角用户头像显示实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！