前端前置路由守卫使用及其参数
时间: 2023-08-04 10:30:26 浏览: 98
前置路由守卫是一种在进入某个路由之前执行的函数,用于检查用户是否有权限进入该路由。在 Vue.js 中,可以通过 Vue Router 提供的全局前置守卫 beforeEach() 来实现前置路由守卫。
beforeEach() 接收三个参数:
- to: 即将要进入的目标路由对象
- from: 当前导航正要离开的路由对象
- next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
在 beforeEach() 函数中,可以根据 to 和 from 参数的值来判断用户是否有权限进入目标路由。如果用户有权限,则调用 next() 方法进入目标路由,否则可以调用 next(false) 或 next('/') 等方式将用户重定向到其他页面。
下面是一个简单的例子,演示了如何使用 beforeEach() 实现前置路由守卫:
```
import router from './router'
router.beforeEach((to, from, next) => {
// 判断用户是否登录
const isLogin = localStorage.getItem('isLogin') === 'true'
if (to.meta.requiresAuth && !isLogin) {
// 如果用户未登录且该路由需要登录权限,则重定向到登录页面
next('/login')
} else {
// 如果用户已登录或者该路由不需要登录权限,则直接进入目标路由
next()
}
})
```
在上面的例子中,我们在全局 beforeEach() 函数中判断用户是否登录,如果未登录且目标路由需要登录权限,则重定向到登录页面。如果已登录或者目标路由不需要登录权限,则直接进入目标路由。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)