路由守卫实现登录检验功能[学习整理]

最新推荐文章于 2024-03-05 21:21:26 发布

一个前端不会用git

最新推荐文章于 2024-03-05 21:21:26 发布

阅读量374

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/maoxiaohei_/article/details/124767892

版权

Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

本文详细介绍了在Vue3中如何设置路由及实现权限控制。通过创建router.js，引入并配置页面路由，利用beforeEnter钩子进行登录状态判断，确保已登录用户才能访问特定页面。同时，在全局路由拦截器中，进一步判断用户登录状态，未登录时强制跳转至登录页。这为 Vue3 应用提供了基础的路由安全措施。

摘要由CSDN通过智能技术生成

学习链接: Vue3 从入门到实战进阶式掌握完整知识体系
在这里插入图片描述

//router=>router.js
import {
  createRouter,
  createWebHashHistory
} from 'vue-router'

//引入页面地址
import Home from '../views/home/Home'
import Register from '../views/register/Register'
import Login from '../views/login/Login'

//配置页面路由
const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/register',
    name: 'Register',
    component: Register,
    //路由刚进来，页面运行之前加载的方法，beforeEnter方法里包含着to,from,next三个参数。
    //to:表示要去的页面
    //from:从那个页面跳的
    //next：判断条件的，告诉下一步要干嘛，如果只是next()就继续执行事件，反之给她判断。
    beforeEnter(to, from, next) {
      //定义一个isLogin,赋予本地状态
      const { isLogin } = localStorage;
      //如果本地已经登录，跳转Home页面，否则继续执行
      isLogin ? next({ name: 'Home' }) : next();
    }
  }, {
    path: '/login',
    name: 'Login',
    component: Login,
    //点击登录页面时候判断，login状态是否登录了。
    beforeEnter(to, from, next) {
      const { isLogin } = localStorage;
      isLogin ? next({ name: 'Home' }) : next();
    }
  },
]

// 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单

const router = createRouter({
  //内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  // `routes: routes` 的缩写
  routes
})

// 路由拦截,如果没有登录的话，只能去登录页，或者注册页。
// 根据登录状态，或者前往的页面，判断是否要前往的页面。
router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage;
  const { name } = to;
  const isLoginOrRegister = (name === "Login" || name === "Register");
  (isLogin || isLoginOrRegister) ? next(): next({ name: 'Login' });
})

export default router