美文网首页前端开发让前端飞Web前端之路
Vue-router每个路由验证Token,实现登录状态访问

Vue-router每个路由验证Token,实现登录状态访问

作者: 相听不厌 | 来源:发表于2019-08-05 09:57 被阅读2次
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import store from "./store";
// import router from "@vue/cli-service/generator/router/template/src/router";

Vue.use(Router)

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/login',
            name: 'login',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ './views/Login.vue')
        }
    ]
})
router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        if (store.state.token) {
            next()
        } else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}
            })
        }
    } else {
        next()
    }
})

export default router;

相关文章

网友评论

    本文标题:Vue-router每个路由验证Token,实现登录状态访问

    本文链接:https://www.haomeiwen.com/subject/dsjpdctx.html