手动在浏览器地址栏输入地址后,判断是否有token,没有token重定向到登录页
时间: 2024-03-10 19:51:03 浏览: 17
在 Vue.js 中,可以通过在路由配置中添加 `beforeEnter` 属性来定义路由独享的导航守卫,该守卫只对当前路由生效。在该守卫中,可以进行身份验证,如果用户没有登录,则可以重定向到登录页。
以下是一个示例代码,用于在路由配置中添加 `beforeEnter` 守卫:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
requireAuth: true
},
beforeEnter: (to, from, next) => {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
}
},
{
path: '/login',
name: 'login',
component: Login
}
]
})
export default router
```
在上面的代码中,我们为 `/` 路由添加了 `beforeEnter` 守卫,并在该守卫中进行了身份验证。如果用户已经登录,则允许路由跳转,否则重定向到登录页。
需要注意的是,在进行手动输入地址的情况下,如果用户已经登录过,直接输入地址也可以访问需要进行身份验证的路由。如果用户没有登录,则会被重定向到登录页。因此,在进行身份验证时,应该同时考虑到这两种情况。