使用vuerouter怎么实现用户登陆功能-创新互联
这篇文章给大家介绍使用vue router怎么实现用户登陆功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联公司专注于企业营销型网站、网站重做改版、天津网站定制设计、自适应品牌网站建设、HTML5、商城网站开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为天津等各大城市提供网站开发制作服务。路由配置
在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆。
const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: "/login", name: "login", component: () => import("./views/Login.vue") }, { path: "/member", meta: { auth: true // 用于判断当前路由是否需要登陆 }, component: () => import('./views/Member.vue') } ] });
全局前置操作
// 登陆验证 const Token = "XH-TOKEN"; router.beforeEach((to, from, next) => { let validator = typeof to.meta.auth == "undefined" || !to.meta.auth || sessionStorage.getItem(Token); let result = validator ? {} : { name: "login", // 跳转到命名路由 query: { url: to.fullPath // 做一个来源页面,用于登陆成功之后跳转 } }; next(result); });vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
关于使用vue router怎么实现用户登陆功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网页标题:使用vuerouter怎么实现用户登陆功能-创新互联
网页路径:http://scyanting.com/article/doecep.html