router结合vuex配置路由拦截

router文件夹index.js

import Vue from 'vue'
import Router from 'vue-router'
const login = r => require.ensure([], () => r(require('@/components/login.vue')))
const index = r => require.ensure([], () => r(require('@/components/index.vue')))


import store from '@/store/store'

Vue.use(Router)

  const routes = [
  {
    path: '/',
    redirect: '/index'
  },{
    path: '/index',
    component: index
  },{
    path: '/',
    name: 'index',
    component: resolve => require(['@/pages/index'], resolve),
    redirect: '/taskIndex',
    children: [
        {
            path: '/taskIndex',
            name: 'taskIndex',
            component: resolve => require(['@/pages/home/taskIndex'], resolve)
        },
        {
            path: '/taskManage',
            name: 'taskManage',
            component: resolve => require(['@/pages/home/taskManage'], resolve)
        }
    ]
  },{
    path:'/login',
    component:login
  },{
    path:'/logout',
    meta: {
      requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
    },
    component: resolve => require(['@/components/logout'], resolve)
  }
]

// 页面刷新时，重新赋值token
console.log('store',store)
if (window.localStorage.getItem('token')) {
  store.commit('login', window.localStorage.getItem('token'))
}

// 官网：https://vuex.vuejs.org/zh/guide/actions.html
// store.dispatch('actionsBtnList',res.data.buttonList);    store.dispatch (分发/提交) Actions

const router = new Router({
  routes
});
// vue路由钩子：https://www.cnblogs.com/WQLong/p/8135553.html
// vue官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
router.beforeEach((to, from, next) => {
  // some() 方法用于检测数组中的元素是否满足指定条件（函数提供） 返回true 或 false
  if (to.matched.some(r => r.meta.requireAuth)) { // 判断该路由是否需要登录权限
      if (store.state.token.token) { // 通过vuex state获取当前的token是否存在
          next();
      } else {
          next({
              path: '/login',
              query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
          })
      }
  } else {
      next();
  }
})

export default router

如果被拦截跳转到 /login 页面

在 /login 页面登录后跳转到之前准备进入的页面

<template>
  <div>
      <div>{{msg}}</div>
      <div @click="toPageLogin">{{msg1}}</div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
    export default {
        data(){
            return {
                msg: '登录页面',
                msg1:'点击登录，保存token'
            }
        },
        methods: {
            ...mapMutations({
                'storeLogin': 'login'
            }),
            toPageLogin(){
                this.storeLogin(true)
                // console.log('点击登录，保存token')
                let redirect = decodeURIComponent(this.$route.query.redirect || '/');
                // console.log(redirect)
                this.$router.push({
                    path: redirect
                })
            }
        }
    }
</script>