vue登录以及权限验证相关的实现

// * http request 拦截器
axios.interceptors.request.use(
  config => {
    // * 判断是否存在token，如果存在的话，则每个http header都加上token
    // * token会在登录之后存储在本地
    if (localStorage.token) {
      config.headers["Authorization"] = `Bearer ${localStorage.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// * http response 拦截器
axios.interceptors.response.use(
  response => {
    let data = response.data;
    // * 正常返回数据
    if (data.code === 0) {
      // * 返回data
      return data
    }
    // * 如果code是20103 表示token未认证(后端定义的错误码)
    // * 跳转到login
    if (data.code === 20103) {
      router.replace('/login')
    }
    return Promise.reject(data);
  },
  error => {
    return Promise.reject(error);
  });

Vue.prototype.$http = axios;

axios.post('/api/login', {
          email: this.email,
          password: this.password
        }) .then((res) => {
            // * 存储token
            localStorage.setItem('token', res.data.token);
            console.info("login successful");
            // * 跳转回登录前页面
            this.$router.push({path: this.$route.query.redirect || '/admin',})

          }).catch((error) => {
          console.error(error)
        });

path: '/admin',
name: 'admin',
component: () => import('../views/admin/Admin.vue'),
// * 需要登录才能访问
meta: {requiresAuth: true},

// * 全局钩子
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // * 对于需要auth的路径
    // * 没有token信息，redirect to login
    if (!localStorage.token) {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

localStorage.removeItem("token")