Two days ago, I just took over a former colleague’s project (into pit, haha). Today, suddenly, the product came to me and said, “Victor, the production received feedback from the user that he logged in the system, but the current login user name was not displayed!” . I immediately said, “No!” .

First of all, what happened to the rollovers? Our system is single sign-on (SSO). After the current user logs in to the unified application portal and selects the application to enter, the background will add the encrypted string of the user’s unified identity to the location and then access your Web application. Students in the front end only need to get the current encrypted code parameter value and decode it accordingly to get the current login user name. Yes, it’s that simple! As for the method of encryption, too much is not disclosed here, and is irrelevant to this discussion. The important point here, however, is that because the encryption on the back end is based on the user name, the encrypted code value may appear with a special symbol (“+”). As follows:

Here, we front-end get the parameter value corresponding to C3 here, and then use the corresponding decoding method to get the user name of the current logon. Since this project uses vue.js and vue-router, it is natural to use the $route.query API to get the parameter information of the address bar.

const { code, c2, c3 } = to.query
Copy the code

“Uw7E2MnIe Nv5FN/9nORQ==”, and the two plus signs in the middle were removed, causing an error when decoding the user name:

And then I wonder if there’s something wrong with vueRouter’s query method? Said to do, directly to Github clone a vueRouter source to my local to find out. Open the source code and find the SRC /util/query.js file, then find the parseQuery method definition:

const decode = decodeURIComponent
/ /...
function parseQuery (query: string) :Dictionary<string> {
  const res = {}

  query = query.trim().replace(/ ^ (\? # | | &) /.' ')

  if(! query) {return res
  }

  query.split('&').forEach(param= > {
    const parts = param.replace(/\+/g.' ').split('=')
    const key = decode(parts.shift())
    const val = parts.length > 0 ? decode(parts.join('=')) : null

    if (res[key] === undefined) {
      res[key] = val
    } else if (Array.isArray(res[key])) {
      res[key].push(val)
    } else {
      res[key] = [res[key], val]
    }
  })

  return res
}
Copy the code

I noticed a line that read:

const parts = param.replace(/\+/g.' ').split('=')
Copy the code

WTF!!!! Before getting the parameter, I replaced the “+” in the string with a null character. This is where I found the invisible bug in production. But why remove the plus sign from the address bar in the first place? At present, I have not figured out the real intention of the official team, if you know, you can also give directions in the comment section. Knowing the real cause of the problem makes it easier to solve the problem. My current solution is to write a way to parse the parameters of the address bar to avoid accidentally removing the “+” from the parameter values. In this way, the decoding method will parse the parameter value into our real user name is OK! Finally, look at the results:

Conclusion: don’t panic when you encounter a problem, and carefully find the root cause of the problem. If you use the API provided by the framework, you can choose to start with the source code and see if it conflicts with the current business logic. The problem was soon solved.