[英]Nuxt3 router doesn't push user to certain page
I have two middlewares:我有两个中间件:
To make logout function I created query path in the first middleware (login?logout=true) and when user wants to logout, dashboard should redirect him to login page with this query, though it doesn't为了实现注销功能,我在第一个中间件(login?logout=true)中创建了查询路径,当用户想要注销时,仪表板应该使用这个查询将他重定向到登录页面,尽管它没有
The thing is that when I do redirection, console.log(to) method on the first middleware prints me:问题是,当我进行重定向时,第一个中间件上的 console.log(to) 方法会打印我:
fullPath: "/dashboard/owner"
全路径:“/仪表板/所有者”
Redirect method重定向方法
this.$router.replace({ name: 'login', query: { 'logout': true } })
First middleware第一个中间件
import { authoritiesRoutes } from "~~/middleware/panel"
import { useAuthStore } from "~~/store/auth"
export default defineNuxtRouteMiddleware(async ({ $pinia }, to, from) => {
const token = useCookie('accessToken')
console.log(to)
if (to.query.logout === 'true') {
token.value = null
return navigateTo('/login')
}
if (token.value) {
const store = useAuthStore($pinia)
await store.retrieveUser(token.value)
if (store.user != null) {
const permissionLevel = store.getUser.authorities.length
const routeName = authoritiesRoutes[permissionLevel]
const route = '/' + routeName.replace('-', '/')
return route;
}
}
})
Second middleware第二个中间件
import { useAuthStore } from '~~/store/auth'
export enum authoritiesRoutes {
'panel' = 1,
'dashboard' = 2,
'dashboard-owner' = 3
}
export default defineNuxtRouteMiddleware(async ({ $pinia, $event }, to) => {
const token = useCookie('accessToken')
if (!token.value) {
return navigateTo('/login')
}
const store = useAuthStore($pinia)
await store.retrieveUser(token.value)
if (store.user == null) {
return navigateTo('/login')
}
const permissionLevel = authoritiesRoutes[to.name];
if (store.getUser.authorities.length < permissionLevel) {
return navigateTo("/login?error=you%20don't%20have%20permission%20to%20watch%20this%20page")
}
})
I figured out that (async ({ $pinia }, to, from)
in the middlewares should be (async (to, { $pinia })
I also found out that useCookie method works only when page is reloaded so I did my task this way:我发现中间件中的
(async ({ $pinia }, to, from)
应该是(async (to, { $pinia })
方法:
export default defineNuxtRouteMiddleware(async (to, { $pinia }) => {
var token = useCookie('accessToken')
const store = useAuthStore($pinia)
if (to.query.logout === 'true') {
if (!token.value) {
return navigateTo('/login')
}
token.value = null
if (process.client) {
store.logout()
}
}
if (token.value) {
await store.retrieveUser(token.value)
if (store.user != null) {
const permissionLevel = store.getUser.authorities.length
const routeName = authoritiesRoutes[permissionLevel]
const route = '/' + routeName.replace('-', '/')
return route;
}
}
})
created () {
if (this.$route.query.logout == 'true') {
this.$router.go(0)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.