使用路由守卫判断登录状态
时间: 2023-08-02 22:06:18 浏览: 36
在前端框架中使用路由守卫可以很好地判断用户登录状态。具体步骤如下:
1. 定义一个路由守卫函数,用于在路由跳转前判断用户是否已经登录。
```
const requireAuth = (to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (isAuthenticated) {
next()
} else {
next('/login')
}
}
```
2. 在路由配置中使用路由守卫。例如,我们需要保护一个需要登录才能访问的页面:
```
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import Dashboard from '@/views/Dashboard'
import Login from '@/views/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
beforeEnter: requireAuth // 使用路由守卫
},
{
path: '/login',
name: 'login',
component: Login
}
]
})
```
这样,当用户访问 `/dashboard` 路径时,会先执行 `requireAuth` 路由守卫函数,判断用户是否已经登录。如果已经登录,则可以访问 `/dashboard` 页面;如果未登录,则会被重定向到登录页面 `/login`。
需要注意的是,这里使用的是简单的本地存储方式判断用户是否已经登录。在实际项目中,建议使用更加安全的方式,如使用 JWT Token 或者 Cookie 等方式来管理用户登录状态。