How to solve the problem that the vue login interface jumps to the home page but the interface is not loaded in time and is redirected to the login interface by the interceptor?

when the vue project login jumps to the home page, it is redirected to the login interface. The next error report is

.

clipboard.png
analyzed that the following reason may be caused by the interceptor"s status 401. After I removed the interceptor, I jumped to the home page and refreshed the data several times. The token is stored normally. The login jump code is as follows

.
 .then(response => {
      localStorage.setItem("token", response.data.result.authToken);
      this.$router.push(this.$route.query.redirect || "/");
     })

interceptor

axios.defaults.headers.common["Authorization"] = localStorage.getItem("token")

axios.interceptors.response.use(
    response => {
        return response
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    router.replace({
                        path: "/login",
            })
          }
       }
        return Promise.reject(error.response.data)
    })

how should I handle it? thank you for your answer


what is the interceptor logic before a request? can you get the token? Do you use token to determine whether you want to log in or not?
also make sure that the backend token is string, and the data saved by localStorage is string.


laxative ~
Hello, landlord. Change your mind. There is no need to add token authentication to the login interface in headers. So there will be a 401 problem. The solution is also simple. When adding header verification, you can determine whether the current request is a login interface.
I hope it will be helpful to you ~

Menu