Tengo token por back-end
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}` y quiero hacer enrutadores públicos y autenticados. pero no puedo entender cómo verificar y hacer el encabezado [ 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 })¿Necesito usar el enrutador antes de cada uno? ¿o que? tal vez tengas algunos buenos documentos. Estaré muy agradecido.
Puede usar "router.beforeEach" para eso. Aquí hay un ejemplo
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(); });