vue beforeEach導(dǎo)航守衛(wèi) 登錄驗(yàn)證功能

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

import Account from '@/components/user/Account'
import Course from '@/components/user/Course'
import Order from '@/components/user/Order'

import store from './../vuex/index'

Vue.use(Router)

const vueRouter = new Router({
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/account',
            name: 'account',
            component: Account
        },
        {
            path: '/course',
            name: 'course',
            component: Course
        },
        {
            path: '/order',
            name: 'order',
            component: Order
        },
  ]
});

vueRouter.beforeEach(function (to, from, next) {
    const nextRoute = [ 'account', 'order', 'course'];
    const auth = store.state.isLogin;
    //跳轉(zhuǎn)至上述3個(gè)頁(yè)面
    if (nextRoute.indexOf(to.name) >= 0) {
        //未登錄
        if (store.state.isLogin === 0) {
            vueRouter.push({name: 'login'})
        }
    }
    next();
});



export default vueRouter

我的需求是做一個(gè)登錄驗(yàn)證路由，store.state.isLogin默認(rèn)是0，如果登錄成功后store.state.isLogin 會(huì)變成1, 我自己定義了三個(gè)測(cè)試組件， 'account', 'order', 'course',http://localhost:8080/#/account 路由是這樣時(shí)，路由會(huì)自動(dòng)跳轉(zhuǎn)到login路由，但是當(dāng)我把http://localhost:8080/#/login 換乘http://localhost:8080/#/order時(shí)，卻直接進(jìn)入了order組件，可是這個(gè)時(shí)候我并沒(méi)有登錄呀，而且vuex里面的store.state.isLogin還是0呢，當(dāng)我刷新下頁(yè)面就又跳轉(zhuǎn)到http://localhost:8080/#/login。。。請(qǐng)問(wèn)下這個(gè)是什么原因？

回答

編輯回答

墻頭草

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

import Account from '@/components/user/Account'
import Course from '@/components/user/Course'
import Order from '@/components/user/Order'

import store from './../vuex/index'

Vue.use(Router)

function guardRoute (to, from, next) {
  if (!store.state.isLogin) {
    next({ path: '/login' });
  } else {
    next()
  }
}

const vueRouter = new Router({
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/account',
            name: 'account',
            component: Account,
            meta: {
                needAuth: true
            }
        },
        {
            path: '/course',
            name: 'course',
            component: Course,
            meta: {
                needAuth: true
            }

        },
        {
            path: '/order',
            name: 'order',
            component: Order,
            meta: {
                needAuth: true
            }

        },
  ]
});

vueRouter.beforeEach(function (to, from, next) {
    if (to.matched.some(m => m.meta.needAuth)) { 
      guardRoute(to, from, next)
    } else {
      next()
    }
});

export default vueRouter

2017年8月20日 21:14