前端进入到某个页面时,判断是否有token,如果没有进入登录页
时间: 2024-03-10 21:50:57 浏览: 12
可以通过以下步骤实现:
1. 在前端页面中,使用 `localStorage` 或者 `sessionStorage` 存储 token。
2. 在前端路由中,定义一个路由守卫(route guard),在路由跳转之前判断是否存在 token,如果存在,则允许路由跳转,否则跳转到登录页。
3. 在登录页中,用户登录成功后,将 token 存储到 `localStorage` 或者 `sessionStorage` 中。
下面是一个示例代码,用于在 Vue.js 中实现路由守卫:
```javascript
import router from './router'
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.meta.requireAuth) {
if (token) {
next()
} else {
next({
path: '/login'
})
}
} else {
next()
}
})
```
在上面的代码中,当路由需要进行身份验证时,会先判断是否存在 token。如果存在,则允许路由跳转,否则跳转到登录页。通过在路由的 `meta` 中设置 `requireAuth` 属性,可以方便地区分需要进行身份验证的路由和不需要进行身份验证的路由。
相关问题
全局守卫没有token就跳转到登录页面,有token就跳转到首页
您的第一个问题是关于全局守卫的跳转问题。通常情况下,我们可以在全局守卫中进行判断,如果用户有token,则跳转到首页;如果没有token,则跳转到登录页面。
以下是一个简单的示例代码:
```
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (token) {
// 如果有token,则跳转到首页
if (to.path === '/login') {
next({ path: '/' })
} else {
next()
}
} else {
// 如果没有token,则跳转到登录页面
if (to.path === '/login') {
next()
} else {
next({ path: '/login' })
}
}
})
```
在上述代码中,我们首先获取了用户的token,然后根据有无token来判断跳转的页面。如果有token,且当前要跳转的页面是登录页,则直接跳转到首页;否则,直接跳转到目标页面。如果没有token,且当前要跳转的页面不是登录页,则直接跳转到登录页;否则,直接跳转到目标页面。
希望能够帮助您解决问题。
手动在浏览器地址栏输入地址后,判断是否有token,没有token重定向到登录页
在 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` 守卫,并在该守卫中进行了身份验证。如果用户已经登录,则允许路由跳转,否则重定向到登录页。
需要注意的是,在进行手动输入地址的情况下,如果用户已经登录过,直接输入地址也可以访问需要进行身份验证的路由。如果用户没有登录,则会被重定向到登录页。因此,在进行身份验证时,应该同时考虑到这两种情况。