如何通过令牌使路由器访问

Question

我有后端的令牌

 axios.post(process.env.VUE_APP_LOGIN, payload)
        .then(response => {
          const {access_token, token_type, user} = response.data;
          this.token = access_token
          this.$store.commit('auth/set_Token', access_token)
          this.store.commit('auth/set_User', user)
          this.$store.commit('auth/set_TokenType', token_type)
          axios.defaults.headers.post['Authorization'] = `Bearer ${access_token}`

我想公开和认证路由器。 但我不明白如何验证和做标题 [authenticated]

Vue.use(VueRouter)


const routes = [
    {
        name: 'DataBase',
        path: '/table',
        component: Table,
    },
    {
        name: 'Home',
        path: '/',
        component: Main,
    },
    {
        name: 'Login',
        path: '/login',
        component: Login,
        meta: {
            public: true,
            hideHeader: true,
            hideFooter: true,
        },

    },
    {
      name: 'Dictionary',
      path: '/dovid',
      component: Dovid,
      meta: {
          
      }
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

我需要在每个之前使用路由器吗？ 要不然是啥？ 也许你有一些好的文档 我将不胜感激

Answer 1

您可以为此使用“router.beforeEach”。这是一个例子

router.beforeEach((to, from, next) => {
// if route is not auth-protected, or user is logged
if (to.matched.some(matchAuthProtectedRoute) && !isLogged()) {
    next({
        path: '/login',
        query: {
            back: to.fullPath
        }
    });

    return;
}

next();
});