vue路由鉴权（vue 路由鉴权）

路由鉴权是一种常见的前端权限控制方式，用于限制用户在系统中的访问权限。在Vue中，可以通过路由守卫来实现路由鉴权。

Vue提供了三种路由守卫：全局前置守卫、全局解析守卫和组件内的守卫。

全局前置守卫通过router.beforeEach()方法实现，可以在路由跳转之前进行权限判断。在这个守卫中，可以根据用户的登录状态、角色等信息来判断用户是否有权限访问该路由。如果没有权限，则可以跳转到登录页面或者其他提示页面。

全局解析守卫通过router.beforeResolve()方法实现，可以在路由解析之前进行权限判断。这个守卫可以用于处理异步路由加载的情况，确保在加载路由之前进行权限判断。

组件内的守卫通过beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave这三个钩子函数实现。beforeRouteEnter在进入路由前被调用，可以在这个守卫中进行权限判断和一些数据的预加载；beforeRouteUpdate在路由更新时被调用，可以用于处理组件内部数据的更新；beforeRouteLeave在离开路由前被调用，可以用于处理一些离开前的操作，比如数据的保存。

在路由守卫中，可以通过调用next()方法来控制路由的跳转。如果调用next()方法，表示允许跳转到目标路由；如果不调用next()方法，表示阻止路由跳转。

下面是一个简单的示例，演示如何使用全局前置守卫实现路由鉴权：

```javascript

// main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

router.beforeEach((to, from, next) => {

// 判断用户是否登录

const isLoggedIn = localStorage.getItem('isLoggedIn')

if (to.meta.requiresAuth && !isLoggedIn) {

// 如果需要登录权限且用户未登录，则跳转到登录页面

next('/login')

} else {

// 允许跳转到目标路由

next()

}

})

new Vue({

router,

render: h => h(App)

}).$mount('#app')

```

```javascript

// router.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

import About from './views/About.vue'

import Login from './views/Login.vue'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'home',

component: Home,

meta: {

requiresAuth: true // 需要登录权限

}

},

{

path: '/about',

name: 'about',

component: About

},

{

path: '/login',

name: 'login',

component: Login

}

]

})

```

在上面的示例中，我们在全局前置守卫中判断了用户是否登录，并且判断了目标路由是否需要登录权限。如果需要登录权限且用户未登录，则跳转到登录页面；否则允许跳转到目标路由。

全局前置守卫中的next()方法是一个必须调用的方法，如果不调用next()方法，路由将无法跳转。在实际应用中，可以根据具体的业务逻辑来决定是否调用next()方法。