vue.js - 我如何使用 vuejs 在我的 url 中编码 token

Question

我有一个应用程序可以在我的浏览器 url 中接收 token

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

我怎样才能从我的网址中删除 (.)

这是我的路线

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

这是我调用函数的脚本标签

<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>

在我删除 (.) 之前我无法获得重置页面请问我如何对 token 进行编码

Answer 1

您拥有的 token 是 JWT token ，它应该包含两个点。我不认为删除它们是个好主意。但是，看起来 Vue 路由器将这些点解释为分隔符或其他东西，导致路由器无法找到路由。

您可能做的是使用查询字符串而不是路由参数。您将 token 添加到 url，如:

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

您应该将路线更改为:

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

现在您可以通过以下方式从路由器获取它:

this.$route.query.token