vue使用路由守卫判断登录的例子
时间: 2023-08-02 17:09:05 浏览: 40
在 Vue 中使用路由守卫可以很方便地判断用户是否已经登录,如果未登录则跳转到登录页面。以下是一个简单的例子:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'Dashboard',
component: Dashboard,
meta: {
requiresAuth: true // 添加 meta 属性,表示需要登录才能访问该页面
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) { // 判断该页面是否需要登录,以及用户是否已经登录
next('/login') // 如果未登录则跳转到登录页面
} else {
next() // 否则放行
}
})
function isAuthenticated () {
// 判断用户是否已经登录,可以根据实际情况自行实现
return localStorage.getItem('username') !== null
}
export default router
```
在上面的例子中,我们定义了两个路由,一个是 `/`,表示用户登录后进入的主页,另一个是 `/login`,表示登录页面。在定义 `/` 路由时,我们通过添加 `meta` 属性来表示该页面需要登录才能访问。在路由守卫中,我们通过调用 `isAuthenticated` 函数来判断用户是否已经登录,如果未登录则跳转到登录页面,否则放行。
需要注意的是,这里的 `isAuthenticated` 函数只是一个示例,需要根据实际情况自行实现。在实际开发中,我们可能需要从后台获取用户信息并保存到本地,然后通过判断本地是否有用户信息来判断用户是否已经登录。