思路
1、前端输入用户名+密码发送登录请求给后端
2、后端接到请求后,验证用户名和密码准确性,验证通过返回状态和token给前端。
3、前端收到后端验证登录结果,进行跳转,并将后端返回token保存到本地localStorage
4、前端路由时检查本地token是否存在,不存在返回登录页面,存在的跳转
5、退出登录清除本地token
6、登录页开发一个忘记密码功能
login页面主要代码:
handleLogin() {
this.loading = true
if ((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 eqeqeq
if (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 = false
console.log('请求异常! ', err)
this.$message.error('咦!怎么报错了!我写的代码怎么会有问题,一定是环境问题!')
})
} else {
this.loading = false
this.$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) { // 设置存储token
state.token = value
localStorage.setItem('token', value)
},
$_setUser(state, value) { // 设置存储token
state.token = value
localStorage.setItem('username', value)
console.log(localStorage.getItem('username'))
},
$_removeStorage(_state, _value) { // 删除token
localStorage.removeItem('token')
}
}
})
export default store
在main.js加入路由拦截功能
import axios from 'axios'
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.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 = token
config.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.body
username = 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"] = date
return self.data
if password == user.get('password'):
date_msg = "登陆成功"
isLogin = 1
#获取token
self.data['token']=create_token(username)
self.data['username'] =username
else:
date_msg = "密码输入错误"
isLogin = 0
self.data["result"] = {'isLogin': isLogin, 'msg': date_msg}
return self.data
思路大概就是这个思路,但是初写肯定会有各种问题,主要看报错,缺什么补什么,按照思路来总会出现你想要的画面。
将源码贡献出来吧有需要的可自取:
https://download.csdn.net/download/kairui_guxiaobai/87234242