位置: IT常识 - 正文

vue中 router.beforeEach() 的用法

编辑：rootadmin

推荐整理分享vue中 router.beforeEach() 的用法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

导航守卫主要是通过跳转或取消得方式守卫导航

在前端路由跳转中，路由跳转前都是会经过beforeEach，而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。

常见的使用场景有：

1、验证用户是否登录（若未登录，且当前非登录页面，则自动重定向登录页面）；2、用户权限；3、用户输入的路路径是否存在，不存在的情况下如何处理，重定向到哪个页面。 vue中 router.beforeEach() 的用法

此处呢我使用一个简单的例子：当用户输入的路径不存在的情况下，将其重定向到‘/’路径来说明beforeEach是如何控制路由的。

话不多说，直接看下边如何实现的（这里我以创建一个名为router-be的项目为例）。

第一步：规定进入路由是否需要权限

@/router/index.js

import A from '@/components/a'{path : '/a',name : 'a',component : A,meta : { // 加一个自定义objrequireAuth : true // 参数 true 代表需要登陆才能进入 A}}第二步：使用vuex 整一个useid

@/assets/store.js

//使用vuex三步走import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//这个理论来说const store = new Vuex.Store({state:{userId : ''}})export default store第三步：使用router.beforeEach()思路：【如果（进入这个路由需要权限）{如果(能获取到这个用户的userID){就让这个用户进入这个路由}否则{就让这个用户进入b这个页面}} 即将进入的路由不需要权限就能进入 {就让这个用户进入这个路由}】对应代码：import store from '@/assets/store' //把这个userId获取过来router.beforeEach((to,from,next)=>{if(to.meta.requireAuth){if(store.state.userId){next()}else{next({path:'/b'})}}else{next()}})实现原理 constrouter=newVueRouter({…}) router.beforeEach((to,from,next)=>{// …}) 每个守卫方法接受三个参数：

1.to => route : 即将进入的目标路由对象 2.from => route : 当前导航正要离开的路由 3.next => function：一定要调用该方法来 resolve这个钩子，执行效果以来 next 方法的调用参数

第四步上一步 /b 路由为登陆页面当进入A 页面之前，需要先请求接口，获取是否有登录，然后把userId存在vuex 的state 中当没有userId 时，则在登录之后，存一个userId 到state 里第五步项目中使用router.beforeEach((to, from, next) => { console.log(to); // DEBUG: 测试 return next(); const { ldomain } = to.query; if (ldomain) { document.domain = ldomain; } const { LoginPage } = byskConfig; if (!router.getMatchedComponents(to.path).length) { console.log("not page", to, from); return next(byskConfig.NotFoundPage.path); } //验证权限 if (to.meta.permId && !hasPerms(to.meta.permId)) { console.log("no auth", to, from); return next(LoginPage.path); } //验证是否登录 if (to.meta.permId && !getCookie("sid")) { console.log("no login & signout", to, from); return next(LoginPage.path); } if (to.matched.length) { let parentRoute = to.matched[to.matched.length - 1].parent; if ( parentRoute && parentRoute.meta.hasOwnProperty("redirect") && parentRoute.meta.redirect !== to.path) { parentRoute.meta.redirect = to.path; } } next();});

权限

export function setupPermissionGuard(router) { router.beforeEach(async (to, from, next) => { const { state, commit, dispatch } = store; // TODO: 404 的处理 // 不需要登录,可访问 if (to.meta.ignoreAuth === true) { next(); return; } // TODO: 白名单 // 刷新重新登录 if (!state.appToken) { await dispatch('relogin'); } // 处理token const hasToken = !!state.appToken; if (!hasToken) { // 未登陆，或过期 // 重定向到登录页 const redirectData = { path: LOGIN_PATH, replace: true, }; next(redirectData); return; } // 判断是否有权限 const hasAuthority = to.meta.permId && hasPerms(to.meta.permId); if (hasAuthority) { // 权限验证 if (to.meta.ignoreKeepAlive !== true) { // 页面需要缓存, 添加到缓存 const { cachePages } = state; const { matched } = to; commit('setCachePages', [...cachePages, ...matched.slice(1)]); } next(); return; } next(from.path); // next(); }); router.afterEach((to) => { if (to.meta?.label) { // 设置页面`title` document.title = `一立科技 - ${to.meta.label}`; } });}