路由拦截

路由拦截

很多页面是需要登录后才有权限访问的，所以需要在前端做路由拦截判断用户是否可以访问该页面。

1 前端路由拦截

实现思路：
在自定义路由时添加一个自定义字段requireAuth，用于判断该用户是否已经登录
成功登录的用户可以进行页面跳转，否则会重定向到登录页面

vue实现前端路由拦截如下：

const routes = [
  {
    path: '/',
    name: 'Index',
    meta: {
      requireAuth: true,
    },
    components: Index
  },
  {
    path: '/login',
    component: Login
  }
];

// 页面刷新时,重新赋值token
if(Vue.cookie.get('token')) {
  store.commit('setToken', VueCookie.get('token'));  // 保证页面刷新token仍有效
}


//利用vue-router提供的钩子函数beforeEach()对路由进行判断。
router.beforeEach((to, from, next) => {
  if (to.matched.some((r) => r.meta.requireAuth)) {// 判断该路由是否需要登录权限
    if (store.state.token) {   //通过vuex state获取当前的token是否存在
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}   //登录成