1、有些路由是无论什么权限都可以访问的?
2、有些路由是当用户登录才能访问?
3、还有一种是login登录页面,当用户登录后要求直接访问首页
有了这三种不同的路由也就代表着三种不同的行为,也就是说我们要在特定种类的路由上面添加独特的信息加以区分;
我们在配置路由的是,可以增加一个meta的字段,这个字段所对应的对象可以填写一些额外的信息;
比如我们在下列代码的create上加一个元信息,然后我们在router.beforeEach上读取这个信息
import { createRouter, createWebHistory } from 'vue-router'
import axios from 'axios'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import Signup from './views/Signup.vue'
import ColumnDetail from './views/ColumnDetail.vue'
import CreatePost from './views/CreatePost.vue'
import PostDetail from './views/PostDetail.vue'
import store from './store'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'login',
component: Login,
meta: { redirectAlreadyLogin: true }
},
{
path: '/signup',
name: 'signup',
component: Signup,
meta: { redirectAlreadyLogin: true }
},
{
path: '/create',
name: 'create',
component: CreatePost,
meta: { requiredLogin: true }
},
{
path: '/column/:id',
name: 'column',
component: ColumnDetail
},
{
path: '/posts/:id',
name: 'post',
component: PostDetail
}
]
})
// 全局前置守卫 按照创建顺序调用 守卫是异步执行的
router.beforeEach((to, from, next) => {
// to 指的是我们即将要到达的路由
// from 是指正在离开的路由
//
const { user, token } = store.state
const { requiredLogin, redirectAlreadyLogin } = to.meta // 读取路由元信息
if (!user.isLogin) {
if (token) {
axios.defaults.headers.common.Authorization = `Bearer ${token}`
store.dispatch('fetchCurrentUser').then(() => {
if (redirectAlreadyLogin) {
next('/')
} else {
next()
}
}).catch(e => {
console.error(e)
store.commit('logout')
next('login')
})
} else {
if (requiredLogin) {
next('login')
} else {
next()
}
}
} else {
if (redirectAlreadyLogin) {
next('/')
} else {
next()
}
}
})
export default router