how can i encode a token in my url using vuejs-CodePudding

i have an app which recieves token in my broswer url

http://localhost:8081/reset/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MmU2YWJmMmMzMzI0Mjk1NGQyNmVjZjIiLCJpYXQiOjE2NTk1MDIwNTEsImV4cCI6MTY1OTUwMjk1MX0.GIlKy_GI7HlfuB1WgD9HPxOGRZUX2_uOtOclrDTW3Y8

how can i remove (.) from my url

this is how i go to my route

  { name: "reset", path: "/reset/:token", component: Reset },

this is my script tag on how i call the function


<script>
import axios from "axios";
export default {
  data() {
    return {
      password: "",
      confirm_password: ""
    };
  },
  mounted() {
    console.log("the id is :"   this.$route.params.token);
  },
  methods: {
    async submit() {
      let token = this.$route.params.token;
      let encoded = encodeURI(token);
      return axios({
        method: "post",
        data: {
          password: this.password,
          token: this.$route.params.token
        },
        url: "http://localhost:5000/api/auth/updatePassword",
        headers: {
          "Content-Type": "application/json"
        }
      })
        .then(res => {
          console.log(res);
          this.$router.push({ name: "login" });
        })
        .catch(error => {
          console.log(error);
        });
    },
    clear() {
      this.$refs.form.reset();
    }
  }
};
</script>

i can't get the reset page until i remove the (.) please how can i encode the token

CodePudding user response：

The token that you have is a JWT token, which should contain the two dots. I don't think removing them is a good idea. However, it looks like Vue router interprets the dots like a separator or something, causing the router to fail in finding the route.

What you might do is use a query string instead of a route param. You add the token to the url like:

http://localhost:8081/reset?token=eyJhbGciOiJ...

You should change the route to:

{ name: "reset", path: "/reset", component: Reset },

Now you can get it from the router with:

this.$route.query.token