vue实现用户未登录时跳转到登录页面

router.js


export default new Router({
  routes: [{
    path: '/login',
    component: Login,
    meta: {
      requireAuth: false // 不需要鉴权
    }
  }, {
    path: "/home",
    component: Home,
    meta: {},
  }}]
})

main.js

router.beforeEach((to, from, next) => {
  const type = to.meta.type
  // 判断该路由是否需要登录权限
  if (to.meta.requireAuth) {
    // 该路由需要登录权限
    if (sessionStorage.getItem('token')) {
      // 已登录
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})
Vue 应用中实现用户未登录自动跳转到登录界面通常涉及到路由守卫(route guards)。Vue Router 提供了几种类型的守卫,其中 `beforeEach` 守卫非常适合这个场景。以下是步骤: 1. **安装并引入**: 首先,你需要安装 `vue-router` 和 `vue-authenticate` 或者其他类似的库来处理路由拦截。 ```bash npm install vue-router vue-authenticate ``` 2. **配置全局守卫**: 在你的主入口文件(如 `main.js` 或 `App.vue` 的原型上添加 `beforeEach` 守卫,检查用户是否已登录。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import auth from './auth'; // 引入你的认证模块 const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes: ... // 你的路由配置 }); router.beforeEach((to, from, next) => { if (auth.isAuthenticated()) { // 检查用户是否已经登录 next(); // 已登录则继续加载下一个页面 } else { next('/login'); // 如果未登录,导航到登录页 } }); export default router; ``` 3. **登录状态管理**: 在 `auth` 模块中,你可以设置用户的登录状态以及登录验证函数。当用户登录成功后,更新登录状态。 4. **登录组件**: 创建一个名为 `Login.vue` 的登录组件,用于展示登录表单,并在用户登录后通过回调函数通知应用更新登录状态。 5. **路由配置**: 确保登录路径 `/login` 和其它需要权限的页面都在路由列表中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值