Question

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

路线

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

我在组件中使用的功能

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

Answer 1

在您的路由器中，您可以执行以下操作。

将使用meta: { requiresLogin: true} }方法检查标有BeforeEach的所有路线。在这里，我们将它们重定向到登录页面。

原则上，您可以暂停路由器并在此处显示模态或其他任何内容。

<强>路由器

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

Answer 2

在路线中创建其他元字段requiresAuth，以指定哪条路线需要登录用户：

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
  }
})

用于vue路线的中间件

2 个答案: