vue判断如果用户未登录就访问主页则被强制跳转到登陆界面并弹框显示请先登录,如果登录了就直接进入主页
时间: 2023-09-05 15:07:10 浏览: 62
在Vue中判断用户是否登录可以通过在路由导航守卫中进行判断。如果用户未登录就访问主页,则在导航守卫中进行重定向到登录页面,并弹出提示框。如果用户已经登录,则直接进入主页。
以下是一个简单的示例代码:
```javascript
// 导入Vue和Vue Router
import Vue from 'vue'
import Router from 'vue-router'
// 在Vue中使用Vue Router
Vue.use(Router)
// 创建Vue Router实例
const router = new Router({
routes: [
// 主页路由
{
path: '/',
name: 'home',
component: Home
},
// 登录页面路由
{
path: '/login',
name: 'login',
component: Login
}
]
})
// 导航守卫
router.beforeEach((to, from, next) => {
// 判断用户是否已经登录
const isLogin = localStorage.getItem('token') ? true : false
// 如果用户未登录并且要访问主页,则重定向到登录页面并弹出提示框
if (!isLogin && to.path === '/') {
alert('请先登录')
next('/login')
} else {
// 如果用户已经登录或者要访问的页面不是主页,则直接进入页面
next()
}
})
// 导出Vue Router实例
export default router
```
在上面的代码中,我们使用了localStorage来判断用户是否已经登录,如果localStorage中存储了token,则表示用户已经登录,否则表示用户未登录。在导航守卫中,我们判断用户是否已经登录并且要访问的是主页,如果是,则重定向到登录页面并弹出提示框,否则直接进入页面。
相关推荐
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)