vue页面跳转拦截器 打开新页面

登录拦截逻辑

第一步：路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 
否则就进入登录页面。在路由管理页面添加meta字段

import Vue from 'vue'
import Router from 'vue-router'
 
 
Vue.use(Router)
 
 
const routes = [
	{
		path: '/',
		name: "欢迎",
		meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
        },
		component: resolve => require(["../components/Hello.vue"], resolve)
	},
	{
		path: '/login',
		name: "登录",
		/*meta: {
            requireAuth: false,  // 添加该字段，表示进入这个路由是需要登录的
        },*/
		component: resolve => require(["../view/login/login.vue"], resolve)
	}
]
 
 
export default new Router({
    base: "/",
    routes
})

• 定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。。所以在main.js加上

  
  router.beforeEach((to, from, next) => {
      if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
          if (store.state.token) {  // 通过vuex state获取当前的token是否存在
              next();
          }
          else {
              next({
                  path: '/login',
                  query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
              })
          }
      }
      else {
          next();
      }
  })

  转载 https://blog.youkuaiyun.com/zhangwenwu2/article/details/76228140