全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  应聘面试  >  html5面试题

路由守卫路由拦截如何配置?

发布时间:2022-11-16 17:01:57
发布人:qyf

  通常在项目里,我们需要用户进行登录,才能让用户查看项目。

  在后台管理系统中,会根据不同的用户权限展示不同的内容。

  在用户访问页面之前,我们通过全局前置守卫对路由进行拦截,看看你是不是可以通过。

  通过的标准是否登录,如果登录就通过放行,没有通过就打回。

  // 不需要路由验证页面 const whiteList = ['login', 'index'] router.beforeEach((to, from, next) => { // 确定用户是否已登录 const hasToken = false // 这里就是路由是否通过标准,一般都是通过token来验证 if (hasToken) { // 登录 if (to.path === '/login') { // 如果已登录,请重定向到主页 next({ path: '/index' }) return } next() } else { if (whiteList.indexOf(to.name) !== -1) { // 在免费登录白名单中,直接进入 next() } else { // 没有访问权限的其他页将重定向到登录页。

  next(`/login`) } } }) 需要注意的一点是,用户没有登录,是需要跳转到登录页面,如果在白名单里面没有登录页或者没有next(),页面一直跳转直到内存溢出。

  每个项目的验证是否拥有权限不一样,权限判断那一块可以根据自己的实项目需求来进行操作。

路由守卫路由拦截如何配置

相关文章

前端公司面试题——jquery移除class

2023-08-07

前端JavaScript面试题——js时间戳转换时间的方法

2023-08-04

前端中JavaScript常见的面试题——js年月日转为时间戳

2023-08-02

前端jquery面试题——jquery字符串包含哪些?

2023-08-01

前端JavaScript面试题——js如何创建函数?

2023-07-31

前端程序员面试题——jquery发送get请求的步骤

2023-07-28
在线咨询 免费试学 教程领取