TypeScript vue-router.beforeEach函數代碼示例

export const createRouter = (): VueRouter => {

  const routes: IRouteConfigAugmented[] = getAllRoutes();
  const router = new VueRouter({
    mode: 'hash',
    routes,
    scrollBehavior(to, from, savedPosition) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({x: 0, y: 0});
        }, 400); // scroll to top for each new route
      });
    },
  });

  router.beforeEach((to, from, next) => {
    const route: IRouteConfigAugmented = _.find(routes, (rt) => rt.path === to.fullPath);
    if (route) {
      StoreW.setTitle(route.text);
      StoreW.setRoute(route);
    }

    next();
  });

  return router;
};

const createRouter = () => {
	const router = new VueRouter(ROUTER_SETTING);

	// manually hook: page not scroll to top when router changes
	// github issue: https://github.com/vuejs/vue-router/issues/173
	router.beforeEach((route, redirect, next) => {
		window.scrollTo(0, 0);
		next();
	});

	router.afterEach((route: Route) => {
		console.info(`${new Date()}: ${route.path}`);
	});

	return router;
};

var router = new VueRouter();

router.map({
	'/login': {
		name: 'login',
		component: loginState,
		auth: false
	},
	'/dashboard': {
		name: 'dashboard',
		component: dashState,
		auth: true
	},
	'/transactions': {
		name: 'transactions',
		component: transState,
		auth: true
	}
});

router.beforeEach((trans:any) => {
	if (trans.to.auth && !Auth.isLogged) {
		trans.redirect('/login');
	} else {
		trans.next();
	}
});

export default router;

        { path: '/implicit/callback', component: Auth.handleCallback() },
        {
            path: '/protected',
            component: {
                name: 'protected',
                template: '<div>Protected Route</div>'
            },
            meta: {
                requiresAuth: true
            }
        },
    ]
});

const redirectGuard = Vue.prototype.$auth.authRedirectGuard();
router.beforeEach(redirectGuard);

const component = Vue.extend({
    mounted() {
        const authd = this.$auth.isAuthenticated();
        const userInfo = this.$auth.getUser();
        const handleAuth = this.$auth.handleAuthentication();
        const path = this.$auth.getFromUri();
        const idToken = this.$auth.getIdToken();
        const accessToken = this.$auth.getAccessToken();
    },
    methods: {
        logout() {
            const logoutPromise = this.$auth.logout();
        },
        redirect() {

})

router.beforeEach((to, from, next) => {
	if (to.matched.some((record) => record.meta.authorizedZone)) {
		if (!storage.getItem(config.tokenName)) {
			// console.log('Checkpoint #1')
			next({
				path: '/login',
				// query: { redirect: to.fullPath }
			})
		} else {
			// console.log('Checkpoint #2')
			next()
		}
	} else if (to.matched.some((record) => record.meta.loginPage)) {
		if (storage.getItem(config.tokenName)) {
			// console.log('Checkpoint #3')
			next({
				path: '/',
				// query: { redirect: to.fullPath }
			})
		} else {
			// console.log('Checkpoint #4')
			next()
		}
	} else {
		// console.log('Checkpoint #5')
		next() // make sure to always call next()!
	}
})

export default router