Vue Router не перенаправляет

Question

Vue Router не перенаправляет

1

В настоящее время я пытаюсь показывать только страницы, если пользователь вошел в систему. Проблема, с которой я сталкиваюсь, заключается в том, что requireAuth() кажется, называется бесконечным количеством раз.

Код используется следующим образом:

// Routes
const routes = [
    {
        path: '/',
        component: Dashboard,
        beforeEnter: (to, from, next) => {
            requireAuth(to, from, next);
        },
        children: [
            {
                path: '',
                name: 'dashboard',
                component: DashboardIndex
            }, {
                path: '*',
                name: '404',
                component: NotFound
            }
        ]
    },  {
        path: '/login',
        component: Login,
        name: 'login',
    },
];

function requireAuth (to, from, next) {
    if (!localStorage.token) {
        console.log('testing');
        next({
            path: '/login',
            query: { redirect: to.fullPath }
        })
    } else {
        next()
    }
}

// Routing logic
let router = new VueRouter({
    routes: routes,
    mode: 'hash'
});

testing выдается ~ 1000 раз, прежде чем я получу ошибку:

[vue-router] ошибка при открытии маршрута: warn @app.js

app.js RangeError: превышен максимальный размер стека вызовов

Как я могу убедиться, что /login перенаправлен на if !localStorage.token?

Chris 08 фев. 2018, в 10:59

Источник

Теги:

javascript

vue.js

vue-router

2 ответа

0

Если у вас нет токена localStorage вы перенаправляете пользователя в /login.

Поскольку это также маршрут Vue, ваша логика requireAuth снова будет работать (поскольку она выполняется для каждого маршрута). Это означает, что вы только что создали бесконечный цикл, в котором пользователь будет постоянно перенаправляться в /login даже если пользователь уже находится на этой странице.

Чтобы остановить это, просто не переадресовывайтесь в /login когда вы уже находитесь в /login.

Я оставлю эту часть вам, но это не должно быть так сложно, если вы поймете, что происходит.

Stephan-v 08 фев. 2018, в 09:09

Ещё вопросы

Meet Zaveri · Accepted Answer · 2018-02-08T09-51-00.000Z

Я столкнулся с той же проблемой, что и соответствующий источник ошибок, все сводится к next() функции, которая необходима для перехода к пути, который имеет to.path как значение. Если вы будете использовать router.push или router.replace тогда можно вызвать бесконечное количество раз, когда отображается ошибка ошибки callstack. Поэтому используйте просто next() и пусть API-интерфейс router выполняет громоздкую работу

Я делал это, но по-разному. Я обработал всю логику в файле main.js и файл routes.js содержит -

var routes = [{
  path:'/login', 
  component: Login
 },
 { 
  path:'/',
  component: dashboard
 }]

Теперь я контролировал все типы валидации в файле main.js, используя API vue-router интерфейс vue-router качестве помощи от этого - https://router.vuejs.org/en/api/route-object.html

Итак, теперь main.js будет содержать -

  const checkToken = () => {
    if(localStorage.getItem('token') == (null || undefined) ){
        console.log('token is not there : ' + localStorage.getItem('token'));
        return false;
    }
    else{
        return true
    }
    }


//then Use 'router.push('/login')' as

router.beforeEach((to, from, next) => {
  if(to.path == '/') {
    if(checkToken()) { 
        console.log('There is a token, resume. (' + to.path + ')' + 'localstorage token ' + localStorage.getItem("token"));
        next();

    } else {
        console.log('There is no token, redirect to login. (' + to.path + ')');
        router.push('/login');
    }
}

Таким образом, вы можете структурировать, как это, как управлять всеми вещами в main.js и оставить route.js outta route.js