# vue-login-permission

**Repository Path**: jsland/vue-login-permission

## Basic Information

- **Project Name**: vue-login-permission
- **Description**: 基于vue实现的登陆权限（菜单权限、按钮权限、后端动态路由）完整解决方案
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-06-30
- **Last Updated**: 2025-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于VUE的登陆权限实现完整方案（后端动态路由）
## 核心思想
#### 一、路由权限控制
1. 路由拦截。检查sesstionStorage或者vuex里面是否有用户信息（token、sessionId），确定用户是否登陆。若未登陆则进入登陆页面。
2. 动态路由。通过后端返回路由数据，针对不同用户动态加载不同的路由。不同用户看到不同的菜单。

#### 二、按钮权限控制
通过`全局自定义指令`实现按钮权限控制

#### 三、请求权限控制
1. 请求拦截
发送请求时，验证是否有token，是否需要登陆获取token。如果有token，在请求头加入 例如：`config.headers['JSESSIONID'] = getToken()`
2. 响应拦截
接收请求时，拦截，如果token过期则重新登陆。

## 实现流程图
![登陆鉴权实现流程](https://images.gitee.com/uploads/images/2021/0701/105837_b88ef525_4952288.png "屏幕截图.png")

## 项目命令
1. 下载依赖  
 `npm install` / `cnpm install`
2. 启动  
 `npm run dev` / `cnpm run dev`
3. 打包
`npm run build:prod`

## 

## 参考文档
* 如何用 Vue 实现前端权限控制 https://blog.csdn.net/gitchat/article/details/78849246