提示：以下是本篇文章正文内容，下面案例可供参考
本地接口baseurl根地址http://localhost:8888/api/private/v1/
登录流程：
一…登录总思路 -baseurl/login
1.在登录页面输入用户名和密码
2.调用后台接口进行验证
3.通过验证之后，根据后台的响应状态跳转到项目主页
- 登录组件布局
通过 Element-UI 组件实现布局
el-form el-form-item el-input el-button
- 实现登录
通过 axios 调用登录验证接口
登录成功之后保存用户 token 信息
跳转到项目主页
const {data: res } = await this. h t t p . p o s t ( ′ l o g i n ′ , t h i s . l o g i n F o r m ) i f ( r e s . m e t a . s t a t u s ! = = 200 ) r e t u r n t h i s . http.post('login', this.loginForm) if (res.meta.status !== 200)return this. http.post(′login′,this.loginForm)if(res.meta.status!==200)returnthis.message.error(‘登录失败！’)
// 提示登录成功
this. m e s s a g e . s u c c e s s ( ′ 登录成功 ！ ′ ) / / 把登录成功的 t o k e n 保存到 s e s s i o n S t o r a g e w i n d o w . s e s s i o n S t o r a g e . s e t I t e m ( ′ t o k e n ′ , r e s . d a t a . t o k e n ) / / 使用编程式导航，跳转到后台主页 t h i s . message.success('登录成功！') // 把登录成功的token保存到sessionStorage window.sessionStorage.setItem('token', res.data.token) // 使用编程式导航，跳转到后台主页 this. message.success(′登录成功！′)//把登录成功的token保存到sessionStoragewindow.sessionStorage.setItem(′token′,res.data.token)//使用编程式导航，跳转到后台主页this.router.push(‘/home’)
3. 路由导航守卫控制访问权限
如果用户没有登录，但是直接通过 URL 访问特定页面，需要重新导航到登录页面
// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
// 如果用户访问的登录页，直接放行
if (to.path === ‘/login’) return next()
// 从 sessionStorage 中获取到 保存的 token 值
const tokenStr = window.sessionStorage.getItem(‘token’)
// 没有token，强制跳转到登录页
if (!tokenStr) return next(‘/login’)
next()
})
4. Vue 直接操作 DOM
通过 ref 标注 DOM 元素
// 在 DOM 元素上通过 ref 属性标注，属性名称自定义
hello
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/119894.html