如果前端与服务器之间存在跨域问题,则需要使用token方式来维持登录状态。反之,则用cookie和session。
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
通过 Element——UI 组件实现布局
1.先创建分支(在开发中,如果要开发新功能,尽量把新功能放到一个新的分支上进行开发,分支开发完成以后,再合并到master主分支上)
loginFormRules: {
// 验证用户名是否合法
username: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
// 验证密码是否合法
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 10, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
}
methods: {
// 点击重置按钮,重置登录表单
resetLoginForm () {
// console.log(this);
this.$refs.loginFormRef.resetFields()
},
// 表单的预验证
login () {
this.$refs.loginFormRef.validate(async (valid) => {
// console.log(valid)
if (!valid) return
const { data: res } = await this.$http.post('login', this.loginForm)
console.log(res)
if (res.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功!')
// 1. 将登陆成功之后的 token,保存到客户端的 sessionStorage中
// 1.1 项目中除了登录之外的其他API接口,必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效,所以将 token 保存到 sessionStorage中
// 1.3 localStorage 是持久化的存储机制,sessionStorage是会话期间的存储机制
window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式导航跳转到后台主页,路由地址是 /home
this.$router.push('/home')
})
}
}
关于localStorage 和 sessionStorage的区别如下:
localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。
sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。
如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。
router.beforeEach((to, from, next) => {
// 如果访问的是登录页面
if (to.path === '/login') return next()
// 如果访问的不是登录页面,则要先检查是否有token
const tokenStr = window.sessionStorage.getItem('token')
// 如果没有token
if (!tokenStr) return next('/login')
// 如果有token
next()
})
基于token的方式实现退出比较简单,只需要销毁本地的token即可。这样,后续的情趣就不会携带token,必须重新登录生成一个新的token之后才能访问页面
methods: {
logout () {
// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push('/login')
}
}
当写完登录功能代码时,查看一下当前项目中的源代码状态:
输入 gitt add . 之后再运行 git commit -m :
查看分支:
将login分支中的代码合并到master主分支中:
那如果希望把本地的login分支推送到云端进行保存该怎么办?(云端只有一个master默认分支)