djiango+ vue 用户权限全部代码,并且不能使用restframework
时间: 2024-10-07 20:05:08 浏览: 35
测试平台:vue+djiango+mysql
在 Django 与 Vue.js 的项目中,实现用户权限通常会涉及到 Django 的认证系统(Authentications)以及 Vue 中的数据管理。由于你提到不使用 RESTful API 和 Django Rest Framework (DRF),我们可以采用 Django 自带的视图功能以及前端路由来进行权限控制。
首先,在 Django 后端:
1. **设置视图函数**:
在 `views.py` 文件里,创建一个处理用户登录的视图函数,例如:
```python
from django.contrib.auth import authenticate, login
def user_login(request):
if request.method == 'POST':
username = request.POST['username']
password = request.POST['password']
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
# 返回响应给 Vue
return JsonResponse({'message': 'Login successful'})
else:
return JsonResponse({'error': 'Invalid credentials'}, status=401)
```
2. **配置URL路由**:
在 `urls.py` 配置登录、注销等 URL 路由到相应的视图函数:
```python
path('login/', views.user_login, name='login'),
path('logout/', logout_then_login, {'next_page': '/'}),
```
3. **Django内置的中间件**:
使用 Django 的 `@login_required` 来保护需要权限的视图:
```python
@login_required
def protected_view(request):
# 视图代码...
```
然后,在 Vue.js 前端:
1. **Vue组件**:
创建登录和跳转功能:
```javascript
methods: {
loginUser(data) {
axios.post('/api/login', data).then(response => {
// 存储用户的JWT token
localStorage.setItem('token', response.data.token);
// 跳转到需要权限的页面
this.$router.push('/protected');
}).catch(error => {
// 处理错误...
});
},
logoutUser() {
localStorage.removeItem('token');
this.$router.push('/login');
}
}
```
2. **路由守卫**:
在 Vue Router 中,你可以编写自定义的全局守卫来检查是否有有效的 JWT token:
```javascript
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (!token && to.path !== '/login') {
next({ path: '/login' });
} else if (token && !checkTokenIsValid(token)) {
next({ path: '/login' }, { replace: true });
} else {
next();
}
});
```
**相关问题--:**
1. 如何在Vue中验证JWT token的有效性?
2. Django的中间件是否支持基于角色的访问控制?
3. 如果我想添加更复杂的权限管理系统,比如基于角色的访问控制(RBAC),如何实现?
阅读全文