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();

     }

   }

巴特西

vue + django 的权限控制

最新文章

热门文章