Express vue路由中间件

我想拒绝授权用户的某些路由，如登录页面、注册页面，但我不知道如何制作这些中间件

路线

routes: [
{
  path: '/login',
  name: 'Login',
  component: Login
},
{
  path: '/register',
  name: 'Register',
  component: Register
}
]

computed: {
  isLoggedIn () {
    return this.$store.getters.isLoggedIn
  }
}

我在组件中使用的函数

routes: [
{
  path: '/login',
  name: 'Login',
  component: Login
},
{
  path: '/register',
  name: 'Register',
  component: Register
}
]

computed: {
  isLoggedIn () {
    return this.$store.getters.isLoggedIn
  }
}

---

在你的路由器里，你可以做这样的事情

所有标有

meta:{requiresLogin:true}

的路由都将在

beforeach

方法中进行检查。在这里，我们将它们重定向到登录页面

原则上，您可以停止路由器并在此处显示模式或任何您喜欢的内容

路由器

import Vue from 'vue'
import VueRouter from 'vue-router'

import App from '../views/App.vue'
import Login from '../views/login.vue'
import Register from '../views/registser.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', name: 'app', component: App, meta: { requiresLogin: true} },
    { path: '/login', name: 'login', component: Login },
    { path: '/register', name: 'register', component: Register },
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresLogin)) {
    if (**USER IS NOT LOGGED IN**) {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath,
        },
      });
    } else {
      next();
    }
  } else {
    next();
  }
})

export default router

---

在路由中创建其他元字段

requireauth

，以指定哪个路由需要登录用户：

routes: [{
      path: '/',
      name: 'Dashboard',
      component: Dashboard,
      children: [{
        path: 'settings',
        name: 'Settings',
        component: Settings,
        meta: {
          requiresAuth: true
        }
      }],
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ],

然后在

main.js

中添加中间件：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser')) // your oauth key
    if (authUser && authUser.access_token) {
      next()
    } else {
      next({
        name: 'Login'
      })
    }
  }
  next()
})

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    App
  }
})

router.beforeach（（to，from，next）=>{
if（to.meta.requireAuth）{
const authUser=JSON.parse（window.localStorage.getItem（'authUser'）//您的oauth密钥
if（authUser&&authUser.access\u令牌）{
下一个（）
}否则{
下一个({
名称：“登录”
})
}
}
下一个（）
})
新Vue({
el:“#应用程序”，
路由器，
商店，
模板：“”，
组成部分：{
应用程序
}
})