vue element admin token过期如何返回登陆页

对于这个问题，您可以在前端请求时判断后端返回的状态码。如果状态码为401，则表示用户的token已经过期，您可以在前端处理该状态码，并跳转到登录页让用户重新登录获取新的token。具体的实现可以参考Vue官方文档和ElementUI的相关示例代码。

相关问题

vue element admin 我设置有token就能等于进去 为什么左边没有菜单栏了呢 感觉路由信息 有问题 给我分析分析

根据您描述的情况，如果您在设置了 token 后没有看到左边的菜单栏，可能是路由信息配置有问题。以下是一些可能的分析和解决方法：

1. 检查路由配置：首先，请确保您正确配置了路由信息。在 Vue Element Admin 中，通常使用 Vue Router 来管理路由。请检查您的路由配置文件，确保正确设置了菜单栏需要的路由信息。

2. 检查权限控制：Vue Element Admin 通常使用权限控制来管理菜单栏的显示与隐藏。请确保您的 token 设置正确，并且在登录成功后，将 token 存储到合适的地方，例如 Vuex 或浏览器的本地存储（localStorage）。同时，在路由守卫中，根据用户权限判断是否显示菜单栏。

3. 调试路由信息：您可以在开发者工具中查看控制台输出，检查是否有任何与路由相关的错误或警告信息。尝试打印出您的路由信息对象，确保它包含了正确的路由配置。

4. 检查菜单栏组件：如果以上步骤都没有问题，那么可能是菜单栏组件本身存在问题。请检查菜单栏组件的代码，确保它正确地根据路由信息来渲染菜单项。

如果以上方法仍然无法解决问题，建议您提供更多的代码或详细信息，以便我们更好地分析和帮助您解决问题。

vue element admin 二次开发_Vue + Flask 实战开发系列（六）

本文将介绍如何使用 Vue 和 Flask 搭建一个具有登录、注册、权限控制等基础功能的后台管理系统。

首先，我们需要准备以下环境：

1. Python3.x
2. Flask
3. Flask-RESTful
4. Flask-JWT-Extended
5. Vue.js
6. Vue Router
7. Element UI

接下来，我们开始搭建后台管理系统。

1. 安装 Flask 和相关扩展

使用 Python3.x 版本安装 Flask 和相关扩展，可以使用 pip 工具，执行以下命令：

pip install flask Flask-RESTful Flask-JWT-Extended

2. 创建 Flask 应用

在项目根目录创建一个 app.py 文件，编写以下代码：

from flask import Flask, jsonify
from flask_restful import Api
from flask_jwt_extended import JWTManager

app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'jwt-secret-string'
api = Api(app)
jwt = JWTManager(app)

@app.route('/ping')
def ping():
    return jsonify({'message': 'pong'})

if __name__ == '__main__':
    app.run(debug=True)

上面的代码创建了一个 Flask 应用，并注册了一个 `/ping` 路由，用于测试应用是否正常运行。

3. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目，执行以下命令：

vue create vue-admin

安装 Element UI 和 Vue Router，执行以下命令：

cd vue-admin
npm install element-ui vue-router --save

4. 配置 Vue Router

打开 src/router/index.js 文件，编写以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

export default router

上面的代码定义了两个路由，一个是首页路由 `/`，一个是登录页路由 `/login`。

5. 创建登录页

在 src/views 目录下创建 Login.vue 文件，编写以下代码：

<template>
  <div class="login">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('submit', this.form)
        } else {
          console.log('validate failed')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  width: 400px;
  margin: 0 auto;
  padding-top: 100px;
}
</style>

上面的代码创建了一个登录表单，用于用户登录，表单提交时会调用 handleSubmit 方法。

6. 实现登录功能

打开 src/views/Login.vue 文件，修改 handleSubmit 方法，使用 axios 发送登录请求，如下：

handleSubmit() {
  this.$refs.form.validate(valid => {
    if (valid) {
      axios.post('/api/auth/login', this.form)
        .then(({ data }) => {
          console.log('login success', data)
          localStorage.setItem('jwt', data.access_token)
          this.$router.push('/')
        })
        .catch(err => console.error(err))
    } else {
      console.log('validate failed')
      return false
    }
  })
}

上面的代码使用 axios 发送登录请求，将登录成功后返回的 access_token 存储在 localStorage 中，并跳转到首页。

7. 添加路由守卫

打开 src/router/index.js 文件，添加路由守卫，如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const jwt = localStorage.getItem('jwt')
    if (!jwt) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

上面的代码添加了路由守卫，如果用户未登录，访问需要认证的路由时会自动跳转到登录页。

8. 实现 Flask API

在 app.py 文件中添加以下代码：

from flask_restful import Resource, reqparse
from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity

parser = reqparse.RequestParser()
parser.add_argument('username', type=str, required=True, help='Username required')
parser.add_argument('password', type=str, required=True, help='Password required')

class Auth(Resource):
    def post(self):
        args = parser.parse_args()
        username = args['username']
        password = args['password']
        if username == 'admin' and password == 'admin':
            access_token = create_access_token(identity=username)
            return {'access_token': access_token}, 200
        else:
            return {'message': 'Invalid credentials'}, 401

class User(Resource):
    @jwt_required
    def get(self):
        current_user = get_jwt_identity()
        return {'username': current_user}, 200

api.add_resource(Auth, '/api/auth/login')
api.add_resource(User, '/api/user')

上面的代码实现了两个 API 接口，一个是登录接口 `/api/auth/login`，一个是获取当前用户接口 `/api/user`，这两个接口都需要认证才能访问。

9. 实现 Element UI 布局

打开 src/App.vue 文件，编写以下代码：

<template>
  <div class="app">
    <el-container style="height: 100%;">
      <el-header style="height: 60px; line-height: 60px;">
        <el-row>
          <el-col :span="12">
            <h1 style="color: #fff; margin-left: 20px;">后台管理系统</h1>
          </el-col>
          <el-col :span="12">
            <div style="float: right; margin-right: 20px;">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-user"></i> {{ username }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside style="width: 200px;">
          <el-menu default-active="1" class="el-menu-vertical-demo" :router="true" :collapse="isCollapse">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>菜单1</span>
              </template>
              <el-menu-item index="/menu1/page1">页面1</el-menu-item>
              <el-menu-item index="/menu1/page2">页面2</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>菜单2</span>
              </template>
              <el-menu-item index="/menu2/page1">页面1</el-menu-item>
              <el-menu-item index="/menu2/page2">页面2</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      isCollapse: false
    }
  },
  mounted() {
    axios.get('/api/user')
      .then(({ data }) => {
        console.log('get user', data)
        this.username = data.username
      })
      .catch(err => console.error(err))
  },
  methods: {
    handleLogout() {
      localStorage.removeItem('jwt')
      this.$router.push('/login')
    }
  }
}
</script>

<style>
.app {
  height: 100%;
}
</style>

上面的代码使用 Element UI 实现了后台管理系统的布局，包括头部、侧边栏和主体区域。

10. 完成

至此，我们已经完成了一个基于 Vue 和 Flask 的后台管理系统的开发，具有登录、注册、权限控制等基础功能。后续可以根据项目需求进行功能扩展和优化。