用vue如何实现未登录用户只能浏览,其余操作需要登录才能实现
时间: 2023-10-05 16:06:26 浏览: 51
你可以使用 Vue Router 的导航守卫功能来实现此功能,具体实现步骤如下:
1. 在路由配置中,为需要登录才能访问的路由添加 meta 字段,如下所示:
```
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true } // 需要登录才能访问
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
}
]
```
2. 在 Vue Router 中添加全局前置守卫,判断用户是否登录,如果未登录则重定向到登录页面,如下所示:
```
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth) // 判断路由是否需要登录
const isAuthenticated = localStorage.getItem('token') // 判断用户是否登录
if (requiresAuth && !isAuthenticated) { // 如果需要登录但未登录,则重定向到登录页面
next('/login')
} else {
next()
}
})
```
3. 在登录成功后,将用户的登录状态保存到本地存储中,如下所示:
```
login () {
// 登录成功后将 token 保存到本地存储中
localStorage.setItem('token', 'user_token')
}
```
这样,当用户访问需要登录才能访问的页面时,会先进入全局前置守卫,判断用户是否登录,如果未登录则重定向到登录页面;如果已登录,则继续访问目标页面。