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

登录拦截逻辑

第一步：路由拦截

首先在定义路由的时候就需要多添加一个自定义字段

requireAuth

[code]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加上

  [code]
  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://www.geek-share.com/detail/2712205915.html