vue + django 的权限控制

用vue做前端页面， Django 提供api， 写了一个后台系统，结合方式是vue打包后的dist目录直接作为Django的静态目录， 这样的好处是不用配置Nginx
具体的做法不在这里写了，记一下遇到的问题，比如权限系统

如果是用Django默认的模板系统，权限系统只需要做一个中间件就行了，在请求到达试图函数之前，验证一下，但是如果是用vue, 请求的页面都是vue的路由，然后通过访问api接口来获取数据，这就相当于，你在浏览器输入的地址， 是静态文件的地址，而不是Django的urls中的地址，而Django默认的做法， 访问静态文件是不通过中间件的，可以看一下这里

还好，vue的router自带钩子函数beforeEach，可以实现同样的效果
在Django端专门写一个api用来检查权限，访问vue的地址时，在beforeEach函数中，先发一遍请求，来验证是否有权限，没有的话就拦截住，返回403页面

beforeEach函数有三个参数，to, from 和 next，  to是即将跳转的路径， from是当前导航正要离开的路经，也就是从哪来， next方法用来结束这个函数

在main.js中检查权限：

 router.beforeEach((to, from, next) => {

     if (to.meta.requireAuth) {
       if (store.state.username) {
         // 路由拦截，请求服务端，查看该用户是否有访问权限
         let url = store.state.path +  "api/check_permission";
         let data = JSON.stringify({
           username: store.state.username,
           url: to.fullPath
         });
         console.log(this);
         console.log(axios);
         axios.post(url, data,).then(
           function (response) {
             console.log("response", response);
             let status = response.data.status;
             console.log("status:", status)
             if (status == false) {
               router.push("/console/403")
             } else if (status == "relogin") {
               next({
                 path: '/console/login',
                 query: {referrer: to.fullPath}
               })
             } else {
               next();
             }
           }
         )

       } else {
         next({
           path: '/console/login',
           query: {referrer: to.fullPath}
         })
       }
     } else {
       next();
     }
   }