让我为你讲解一下“vue3使用vue-router及路由权限拦截方式”的完整攻略。
1. 安装和配置vue-router
首先需要在项目中安装vue-router。
npm install vue-router
接下来在main.js中配置路由,并将其挂载到Vue实例上:
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
createApp(App)
.use(router)
.mount('#app')
2. 路由守卫
路由守卫可以用来拦截导航,从而控制用户访问页面的权限。它主要有3种类型:
- 全局守卫
- 路由独享守卫
- 组件内守卫
在这里,我们将会使用全局守卫来实现路由权限拦截功能。
// 定义路由
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/profile',
name: 'Profile',
component: Profile,
meta: { requiresAuth: true } // 添加meta元数据
}
]
})
// 定义路由守卫
router.beforeEach((to, from, next) => {
// 判断路由是否需要登录权限
if (to.meta.requiresAuth) {
// 判断是否已经登录
if (isLogin()) {
next()
} else {
next({
path: '/',
query: { redirect: to.fullPath }
})
}
} else {
next()
}
})
以上代码中,我们给Profile路由添加了一个meta元数据,用来标识该路由需要登录权限。而在路由守卫中,则先判断了当前路由是否需要登录,再判断用户是否已经登录,如果未登录则跳转到登录页面。
3. 示例说明
下面,我们来看看如何使用上述方法来实现路由权限控制。
示例1:登录页面
假设我们的系统有一个登录页面,当用户输入用户名和密码后,如果验证通过,则进入系统功能主页。
// 在登录页面中添加以下逻辑
import { useStore } from 'vuex'
export default {
name: 'Login',
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 真正的登录逻辑
// todo...
const store = useStore()
store.commit('login', currentUser) // 将用户信息保存在Vuex中
if (router.currentRoute.value.query.redirect) {
this.$router.replace(router.currentRoute.value.query.redirect)
} else {
this.$router.push('/')
}
}
}
}
在用户登录成功后,我们将会把用户信息存储在Vuex中,并根据路由参数中的redirect
来判断用户需要跳转到哪个页面。
示例2:功能页面
假设我们系统中有一些需要登录才能访问的功能页面,如个人资料页,只有登录后的用户才能访问。
// 在功能页面中添加以下路由表达式
const routes = [
{
path: '/profile',
component: Profile,
meta: { requiresAuth: true }
}
]
在路由表达式中,给Profile路由添加requiresAuth=true
的元信息,表示该路由需要登录权限。
// 在功能页面中添加以下逻辑代码
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'Profile',
setup() {
const store = useStore()
const currentUser = computed(() => store.getters.currentUser)
return {
currentUser
}
}
}
在功能页面中,我们从Vuex中获取当前用户信息,并实现了一个简单的computed属性,来判断当前用户是否已经登录。如果用户未登录,则会被路由守卫拦截并跳转到登录页面。
总结
通过以上方法实现了路由权限控制,在用户访问需要登录的页面时,需要经过路由守卫的验证。在Vue3中,可以使用全局守卫来实现路由权限拦截功能,同时把用户信息保存在Vuex中,在需要时从Vuex中读取用户信息。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue3使用vue-router及路由权限拦截方式 - Python技术站