在vue3 项目中如何利用router store 实现权限登录 不同的账号访问不同的路径 组件内script使用<script setup>
时间: 2023-11-27 17:49:11 浏览: 36
在Vue3中,可以使用< script setup>标签来编写组件逻辑。为了实现权限登录,我们可以使用Vue Router和Vuex Store来管理用户身份验证和路由访问。
首先,我们需要在Store中定义一个状态,用于保存当前登录用户的信息。例如:
```javascript
import { createStore } from 'vuex'
export default createStore({
state: {
currentUser: null
},
mutations: {
login(state, user) {
state.currentUser = user
},
logout(state) {
state.currentUser = null
}
}
})
```
在登录成功后,我们可以通过调用login mutation将当前用户信息保存到Store中。
其次,我们需要在路由配置中定义各个路由的访问权限。例如,我们可以在路由元数据中定义一个requiredAuth字段,用于标识该路由是否需要登录才能访问:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiredAuth: true
}
},
{
path: '/login',
name: 'Login',
component: Login
},
//...
]
const router = createRouter({
history: createWebHistory(),
routes
})
```
接下来,我们可以在全局前置守卫中检查当前用户是否已经登录,并且是否具有访问该路由的权限。如果未登录或没有权限,则重定向到登录页面。
```javascript
router.beforeEach((to, from, next) => {
const currentUser = store.state.currentUser
const requiresAuth = to.matched.some(record => record.meta.requiredAuth)
if (requiresAuth && !currentUser) {
next('/login')
} else {
next()
}
})
```
最后,在< script setup>标签中,我们可以通过$router和$store来访问Vue Router和Vuex Store。例如,我们可以在Login组件中提交登录请求,并将当前用户信息保存到Store中。
```html
<template>
<div>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username">
<input type="password" v-model="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const login = () => {
// Submit login request
api.login(username.value, password.value).then(user => {
// Save current user to store
store.commit('login', user)
// Redirect to home page
router.push('/')
})
}
</script>
```
上述代码中,我们使用了ref函数来创建响应式变量,然后在登录方法中提交登录请求,并将当前用户信息保存到Store中。最后,我们使用router.push方法来重定向到主页。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)