思路

1、前端输入用户名+密码发送登录请求给后端
2、后端接到请求后，验证用户名和密码准确性，验证通过返回状态和token给前端。
3、前端收到后端验证登录结果，进行跳转，并将后端返回token保存到本地localStorage
4、前端路由时检查本地token是否存在，不存在返回登录页面，存在的跳转
5、退出登录清除本地token
6、登录页开发一个忘记密码功能

login页面主要代码：

handleLogin() {this.loading = trueif ((this.loginForm.username !== '' && this.loginForm.password !== '')) {const jse = new JSEncrypt() // 实例化一个 jsEncrypt 对象jse.setPublicKey(assetConst.publickey) // 配置公钥const userAccount = jse.encrypt(this.loginForm.username) // 加密账号const passWord = jse.encrypt(this.loginForm.password) // 加密密码axios.post(platformBaseUrl + '/api/login/', { 'username': userAccount, 'password': passWord }).then(response => {console.log(response.data)this.loading = false// eslint-disable-next-line eqeqeqif (response.data.result.isLogin == 1) {// 存储token到本地console.log({ 'token': response.data.token, 'username': response.data.username })this.$store.commit('$_setToken', response.data.token)this.$store.commit('$_setUser', response.data.username)this.$message.success('登录成功')// 跳转到主页this.$router.push({ path: this.redirect || '/' })} else {this.$message.error('校验失败，用户名或者密码错误！')// return false}}).catch(err => {this.loading = falseconsole.log('请求异常! ', err)this.$message.error('咦!怎么报错了!我写的代码怎么会有问题,一定是环境问题!')})} else {this.loading = falsethis.$message.warning('用户名和密码不能为空')}

新建store目录，index.js写入保存缓存的代码```python
const store = new Vuex.Store({modules,getters,state: {// 登陆状态// token存储token: localStorage.getItem('token') ? localStorage.getItem('token') : ''},mutations: {$_setToken(state, value) { // 设置存储tokenstate.token = valuelocalStorage.setItem('token', value)},$_setUser(state, value) { // 设置存储tokenstate.token = valuelocalStorage.setItem('username', value)console.log(localStorage.getItem('username'))},$_removeStorage(_state, _value) { // 删除tokenlocalStorage.removeItem('token')}}
})
export default store

在main.js加入路由拦截功能

import axios from 'axios'
Vue.prototype.$http = axios
Vue.config.productionTip = falseVue.prototype.$http.defaults.baseURL = '/api'
// http request 拦截器
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {// 为请求头对象，添加token验证的Authorization字段var token = localStorage.getItem('token')var username = localStorage.getItem('username')if (username & token) {config.headers.token = tokenconfig.headers.username = username}return config
})// 登录拦截
router.beforeEach((to, from, next) => {console.log(to.meta.requireAuth)if (to.meta.requireAuth) {// requireAuth若为true,则该路由需要判断是否登录if (window.localStorage.token) {next()} else {next({ // 返回登录页面path: '/login',query: { redirect: to.fullPath }})}} else {next()}
})new Vue({axios,router,store,render: h => h(App)
}).$mount('#app')

前端基本就开发完成了。
后端需要开发一个登录接口
主要代码如下

 def login(self):param = self.bodyusername = param.get("username")password = param.get("password")#解密username=RSAUtils.decrypt(username, privateKey)password = RSAUtils.decrypt(password, privateKey)try:sql = f'select * from user where username="{username}"'user = DBmananger().callMysql(sql)[0]logger.info(f"password:{password}")logger.info(f"user.passwd:{user.get('password')}")except Exception as e:date = {'flag': 'login fail', "msg": f'{e}'}logger.error(e)self.data["result"] = datereturn self.dataif password == user.get('password'):date_msg = "登陆成功"isLogin = 1#获取tokenself.data['token']=create_token(username)self.data['username'] =usernameelse:date_msg = "密码输入错误"isLogin = 0self.data["result"] = {'isLogin': isLogin, 'msg': date_msg}return self.data

思路大概就是这个思路，但是初写肯定会有各种问题，主要看报错，缺什么补什么，按照思路来总会出现你想要的画面。
将源码贡献出来吧有需要的可自取：
https://download.csdn.net/download/kairui_guxiaobai/87234242