Vue+vue-router+路由守卫实现路由鉴权功能

已于 2023-06-09 14:51:07 修改
阅读量2.7k 收藏 10
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2023-05-31 10:12:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ACCPluzhiqi/article/details/130963116
本文介绍了如何在Vue项目中结合vue-router实现路由鉴权功能。首先，需要安装Vue、vue-router和axios等相关依赖。然后，通过设置路由守卫router.beforeEach检查每个路由是否需要鉴权，若需鉴权，则从localStorage获取token，无token则重定向至登录页。登录页通过axios发送请求验证用户信息，成功后获取token并存储。对于需要鉴权的路由，如/profile，使用beforeRouteEnter守卫获取用户信息。整个过程确保了前端应用的安全性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

路由鉴权功能是Vue+vue-router框架中常见的功能之一，也是前端安全性的一个重要方面。这里提供一个基于Vue+vue-router的路由鉴权实战

安装依赖
首先，在Vue项目中安装所需的依赖。安装Vue、vue-router以及axios等依赖，创建一个新的Vue实例。

npm install vue vue-router axios --save

设置路由和路由守卫
在路由设置中，我们将路由拆分为两类，需要进行鉴权的路由和不需要进行鉴权的路由。需要进行鉴权的路由需要在路由元信息中添加requiresAuth: true属性。

在我们设置路由时，需要引入路由守卫。这里我们使用router.beforeEach守卫，在进入每个路由之前进行鉴权验证。

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要进行鉴权
    // 获取token
    const token = localStorage.getItem('token');
    if (!token) { // token不存在，则跳转到登录页
      next('/login');
    } else { // token存在，则进行下一步路由
      next();
    }
  } else {
    next(); // 不需要进行鉴权，直接进行下一步路由
  }
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

实现登录页

登录页中需要对用户的信息进行验证，并在验证通过后获取返回的token。这里我们使用axios库来发送登录请求。

<template>
  <div class="login-page">
    <h2>Login</h2>
    <div>
      <label>Username:</label>
      <input type="text" v-model="username">
    </div>
    <div>
      <label>Password:</label>
      <input type="password" v-model="password">
    </div>
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      const { data } = await axios.post('/api/login', { username: this.username, password: this.password });
      localStorage.setItem('token', data.token); // 将token存入localStorage中
      this.$router.push('/');
    },
  },
};
</script>

<style scoped>
.login-page {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

设置需要鉴权的路由

在路由设置中，我们为需要鉴权的路由添加requiresAuth元信息。这里我们设定/profile路由需要进行权限验证。

// router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Profile from './views/Profile.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiresAuth: true,
    },
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

实现需要鉴权的页面
最后，在需要鉴权的页面中，我们可以使用beforeRouteEnter守卫来在进入页面前获取用户信息。这里我们使用axios库获取用户信息。

<template>
  <div class="profile-page">
    <h2>Profile</h2>
    <div>
      <label>Username:</label>
      <span>{{ username }}</span>
    </div>
    <div>
      <label>Email:</label>
      <span>{{ email }}</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      email: '',
    };
  },
  beforeRouteEnter(to, from, next) {
    axios.get('/api/userinfo').then(({ data }) => {
      next(vm => {
        vm.username = data.username;
        vm.email = data.email;
      });
    }).catch(() => {
      next('/');
    });
  },
};
</script>

<style scoped>
.profile-page {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}
label {
  font-weight: bold;
}
span {
  margin-left: 10px;
}
</style>

上述代码中，在进入页面之前，我们使用axios发送请求获取用户信息。如果获取失败，则跳转到首页。如果请求成功，则将用户信息存入Vue实例中，并使用next将其传递给组件。在组件中，我们可以直接使用username和email属性渲染页面。

完整的代码如下：

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要进行鉴权
    // 获取token
    const token = localStorage.getItem('token');
    if (!token) { // token不存在，则跳转到登录页
      next('/login');
    } else { // token存在，则进行下一步路由
      next();
    }
  } else {
    next(); // 不需要进行鉴权，直接进行下一步路由
  }
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

// router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Profile from './views/Profile.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiresAuth: true,
    },
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

// Login.vue

<template>
  <div class="login-page">
    <h2>Login</h2>
    <div>
      <label>Username:</label>
      <input type="text" v-model="username">
    </div>
    <div>
      <label>Password:</label>
      <input type="password" v-model="password">
    </div>
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      const { data } = await axios.post('/api/login', { username: this.username, password: this.password });
      localStorage.setItem('token', data.token); // 将token存入localStorage中
      this.$router.push('/');
    },
  },
};
</script>

<style scoped>
.login-page {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

// Profile.vue

<template>
  <div class="profile-page">
    <h2>Profile</h2>
    <div>
      <label>Username:</label>
      <span>{{ username }}</span>
    </div>
    <div>
      <label>Email:</label>
      <span>{{ email }}</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      email: '',
    };
  },
  beforeRouteEnter(to, from, next) {
    axios.get('/api/userinfo').then(({ data }) => {
      next(vm => {
        vm.username = data.username;
        vm.email = data.email;
      });
    }).catch(() => {
      next('/');
    });
  },
};
</script>

<style scoped>
.profile-page {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}
label {
  font-weight: bold;
}
span {
  margin-left: 10px;
}
</style>
08 使用Vue+vue-router+路由守卫实现路由鉴权功能实战
xingyu_qie的专栏
03-26 5087
本文主要是router的拆分，通过进行路由守卫进行用户路由的鉴权控制，还包含了404页面的实现，el-button的自研实现
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 9219
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
小米商城项目解析（完）
永别京华
05-05 6844
一、 项目架构 封装各个模块的api
vue router 路由鉴权（非动态路由）
weixin_34026484的博客
02-20 429
概述 角色：超级管理员、主题管理员、数据服务管理员 权限：超级管理员：所有页面主题管理员：基础公共页面+主题设置页数据服务管理员：基础公共页面+数据服务设置页+数据服务审批页 需求：角色菜单来自后端，当用户未通过页面菜单，直接从地址栏访问非权限范围内的url时，拦截用户访问并重定向到首页。 实际系统中还有几种管理员，此处略去，以精简...
vue路由的使用与鉴权
最新发布
在全栈和前端徘徊的程序员
06-03 1027
在 Vue 项目中，使用vue-router实现路由管理是构建单页应用（SPA）的核心部分。结合可以实现登录验证、权限控制等常见业务需求。
vue-router 鉴权 守卫
weixin_57983561的博客
06-02 274
文章目录 permission.js router.js store/index.js store/getters store/modules/permission permission.js //路由配置文件 import router from './router' import store from './store' //需要安装nprogress import NProgress from 'nprogress' import 'nprogress/nprogress.css' /.
vue-router的鉴权和守卫(精华版）
七的博客
06-02 676
vue-router一、怎么理解vue-router二、实现鉴权的方式分两种：1、通过vue-router addRoutes 方法注入路由实现控制2、通过vue-router beforeEach 钩子限制路由跳转三、路由守卫第一种是全局的守卫 守卫所有的页面第二种是组件级守卫 守卫某一个页面1、路由进入之前2、路由更新之前3、路由离开之前第三种是单个路由独享的钩子函数 一、怎么理解vue-router 路由导航守卫 又叫路由的钩子函数又叫路由的生命周期函数 就是路由 从开始进入路径到跳转结束这个过程中
vue-router的鉴权、守卫
weixin_51288146的博客
06-10 1089
一、什么是vue-router vue-router是路由导航守卫，又叫路由的钩子函数或者路由的生命周期函数。 就是路由从开始进入路径到跳转结束这个过程中，到了某个阶段会自动执行的函数。 原理： 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 路由的两种模式： hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取; 特点： hash虽然在URL中，但不被包括在HTTP请求中；
vue-router
shiqianhui1124的博客
05-23 255
vue-router 路由原理 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 Ⅰ、两种模式： hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取； 特点： hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面。 hash 模式下，仅hash 符号之前的内容会被包含在请求中，如 http://ww..
uni-simple-router实现简单的路由守卫
04-21
本示例“uni-simple-router实现简单的路由守卫”旨在教你如何利用uni-simple-router库来实现这一功能。uni-simple-router是专为uni-app设计的一个轻量级路由管理插件，它提供了一些强大的特性，包括路由守卫，使我们...
vue3+vue-router+vite 实现动态路由
YuShiYue的博客
07-03 8509
举一个最常见的例子，比如说我们要开发一个后台管理系统，一般来说后台管理系统都会分角色登录，这个时候也就涉及到了权限，比如说这个后台管理系统现在有超级管理员，管理员，运维，财务等这几个角色，每个角色登录系统之后都会有不同的权限，超级管理员需要所有的权限，财务可能只需要财务相关的模块(菜单)以及按钮等，通常实现这种需求会有以下常见方案。
vue3+vue-router4 路由守卫
徐同保的专栏
07-30 483
vue3+vue-router4 路由守卫
Vue路由鉴权
LQlove1的博客
05-25 1137
3.如果存在并且有效就放行，但是不能到login页面。4.如果不存在或者token过期就按未登录处理。2.如果存在判断token是否有效。1.首先判断token是否存在。5.未登录只能在login页面。
vue-router路由守卫以及鉴权
mszLOVEyjj的博客
06-06 6138
首先我们先了解路由守卫： 路由守卫有点类似于ajax的请求拦截，就是请求发送之前先给你拦截住一些事情之后再去发送请求，同样这里的理由守卫意思差不多；简单理解为就是你进路由之前，首先把你拦住，对你进行检查；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他钩子函数进行其他操作； vue-reuter提供了三大类钩子函数来实现路由守卫 1.全局钩子函数（beforEach，afterEach） 2.路由独享的钩子函数（beforeEnter） 3.组件内的钩子函数（beforerouterEnter，befo
vue-router 鉴权
weixin_47420579的博客
06-04 532
登录成功后做本地存储与store存储，并进行跳转。 1、Login.vue关键代码 async handleLogin(e) { e.preventDefault() let parmas = { username: this.model.username, password: this.model.password } const res = await this.$http.get('/api/login', params) const {
vue 路由鉴权
青阳的博客
07-22 2812
用于进入某些页面需要什么什么特权才能进入 判断当前路由是否需要鉴权（router中meta字段下requireAuth是否为true） 这里我先讲讲我们项目中用到的路由鉴权方式，这里我们主要用到我们Vue Router中的router.beforeEach, 这个函数的作用就是注册一个全局前置守卫 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。 每个守卫方法接收三个参数： to: Route: 即将要进入的目标
vue项目-路由鉴权
爱蹦哒的咸鱼的博客
02-22 316
一篇文章轻松搞定路由鉴泉
vue3+vue-router 动态路由404问题
10-25
在Vue 3中结合Vue Router处理动态路由时，有时可能会遇到404错误，这通常发生在以下几个方面： 1. 配置问题：确保你在`router.js`文件中配置了动态路径。动态路由一般使用冒号(:)表示变量部分，例如 `/users/:userId`。确保路径和组件名匹配，并且变量映射到正确的属性。 ```javascript { path: '/users/:userId', name: 'UserDetail', component: () => import('@/views/UserDetail.vue') } ``` 2. 组件懒加载：使用`import()`函数导入动态路由时，需要确保正确解析变量。例如，如果变量是用户ID，确保它会被传递给组件。 ```javascript // 这里 userId 被正确地注入到组件 props 中 export default defineComponent({ props: { userId: { type: String, required: true } }, // ... }) ``` 3. 模板匹配：确保在组件模板中通过`<router-view>`标签能够正确渲染动态内容。对于动态路由，可能是 `v-slot` 或者直接写入组件内部。 ```html <template> <div> <h1>User Detail</h1> <router-view :name="userId"></router-view> <!-- 使用 :name 标签 --> </div> </template> ``` 4. 父路由守卫：如果设置了全局的路由守卫，比如`beforeEach`，检查是否有对应的路由存在也非常重要。如果动态路由条件未满足，可能在这里导致跳转失败。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一花一world

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值