Vue3控制路由权限（组合式）

Vue3控制路由权限（组合式）

写在开头

有一个新的项目，本来想从老的一个项目拿来当壳子，中间发现老项目的路由权限控制是通过axios的response拦截器做的，判断返回的status是不是401状态，如果是就跳转到login页面.总感觉挂怪的，因为：

• 如果导向的页面没有在onmounted的页面初始渲染方法中向后端发送请求的话，是不会跳转的。
• 这是多余的请求

我们应当在前端路由层面做处理，也就是路由守卫

代码实现

1.使用pinia做状态管理，存储token值:

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useTokenStore = defineStore('token', () => {
  const token = ref('')
  return { token }
})

2.在router.js文件中

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/LoginView.vue')
    }
  ]
});
router.beforeEach(async (to, from, next) => {
  const tokenStore = useTokenStore();
  if (to.meta.requiresAuth && !tokenStore.token) {
    next({ name: 'login' ,query: { redirect: to.fullPath }});
  } else {
    next();
  }
});

此处beforeEach是全局前置守卫 ，meta字段是路由元信息，我们在需要进行控制的路由上加上此信息以判断，我们判断是否有权限，如果没有则导向login页，完整的url是这样的http://localhost:5173/login?redirect=/

3.在login.vue中：

import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore()
const router = useRouter()
const route=useRoute()
const Api = {
  Login: '/login',
}
function isNullOrWhiteSpace(str) {
    return str == null || str.trim().length === 0;
}
function onSubmit() {
  HttpGet(Api.Login, formData.value).then(res => {
    if (res.status) {
      tokenStore.token = res.data.token
      if(!isNullOrWhiteSpace(route.query.redirect)) {
    		router.push(route.query.redirect)
    		return;
  		}
      router.push('/');
    } 
  })
}

最后我们判断url是否存在redirect参数，如果存在则跳转向此，不存在则转向首页