Question

在我的权限系统中，我将秘密令牌存储在Vue字段中，并在创建的事件中从localStorage获取：

const app = new Vue({
    router: router,
    data: {
        token: '',
        user: null,
    },
    created: function () {
        var token = localStorage.getItem('token');
        if (token) {
            this.token = token;
        }
...

然后我尝试在beforeRouteEnter compomnent方法中获取令牌：

beforeRouteEnter: function (to, from, next) {
    var id = to.params.id;
    console.log(router.app.$root.token);
},

但该字段为空，但后来定义了。如何纠正我的应用程序的结构以使用令牌发送api请求？

Answer 1

您可以将回调传递给next，beforeRouteEnter: function (to, from, next) { var id = to.params.id; next((vm) => { console.log(vm.$root.token); }) },可以访问要路由到的Vue组件的实例。

来自documentation：

当确认导航时将调用回调，并且组件实例将作为参数传递给回调

在您的情况下，它看起来像这样：

<p data-thedata='1'>content</p>

现在，这是您的应用程序使用此令牌发送api请求的正确结构吗？没有更多的背景，可能太宽泛，这很难说。但我认为你可以将令牌存储在你用于api请求的任何库中，并且每次路由更改时都比引用它更好。

访问vue属性

1 个答案: