current position:Home>Vue router dynamically modifies routing parameters

Vue router dynamically modifies routing parameters

2022-04-29 16:37:47segmentfault

Routing address suffix /test?regionId=sj
There is a matching administrative division permission array in the user information xzqh: ['sj','hz'], And a field indicates the administrative division to which the user belongs by default regionId: sj
When you manually modify the address to /test?regionId=hz, because regionId In the matching permission array , Jump to /test?regionId=hz
When you manually modify the address to /test?regionId=nb, Redirect address to /test?regionId=sj

How to implement this logic in routing navigation
I am here beforeEach Judge from the hook regionId After the permission array is not met , To configure to.query.regionId , The routing address will not change



Other answers 1:

Since it's permission , Don't put it in URL in , It's not safe , Can be placed vuex in


Other answers 2:

router.replace


Other answers 3:

Manually modify routing parameters , When it doesn't meet certain conditions , Limit its jump , Redirect to default route

router.beforeEach((to, from, next) => {
       //  Get user rights , Which nodes are allowed to operate 
      let permissionKey = xxx
      //  Get which node the user belongs to by default 
      let defaultRegion = xxx
      //  Manually modified  regionId  Not in the permission domain ,  Redirect to default 
      if(permissionKey.indexOf(to.query.regionId) === -1 && to.query.regionId !== defaultRegion?.key) {
      //  Redirect to the specified 
          router.push({ name: to.name, query: Object.assign(to.query, {
          regionId:  defaultRegion?.key
        })})
    next()
})

copyright notice
author[segmentfault],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/115/202204250946544239.html

Random recommended