vue2登录路由拦截
时间: 2023-07-18 12:03:07 浏览: 47
要在vue2中实现登录路由拦截,可以通过以下步骤进行操作:
1. 在路由配置中,为需要拦截的路由添加一个meta字段,用来标记该路由是否需要登录才能访问。例如:
```javascript
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: {
requiresAuth: true
}
}
]
```
在这个例子中,Dashboard路由被设置了requiresAuth为true,表示需要登录才能访问。
2. 创建一个路由守卫,用来检查用户是否已经登录。例如:
```javascript
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
const isAuthenticated = localStorage.getItem('access_token')
if (requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})
```
在这个例子中,我们检查了用户是否已经登录,如果没有登录,则重定向到登录页面。如果已经登录,则继续访问目标路由。
3. 在登录成功后,保存用户的登录状态。例如:
```javascript
axios.post('/login', { username: 'user', password: 'password' })
.then(response => {
localStorage.setItem('access_token', response.data.access_token)
router.push('/dashboard')
})
```
在这个例子中,我们使用axios发送登录请求,并在成功后保存用户的access_token到localStorage中。然后,我们使用router.push跳转到Dashboard路由。
以上就是在vue2中实现登录路由拦截的全部步骤。