open-index/open-npm huggingface dataset:
npm package: @oneauth/sdk-vue
Description: OneAuth SDK of vue
Latest version: 0.0.3

# @oneauth/sdk-vue

需搭配@oneauth/sdk-core 使用

## 安装

除了本 sdk，也需要安装@oneauth/sdk-core

```shell
npm i --save @oneauth/sdk-core @oneauth/sdk-vue
```

## 实例化@oneauth/sdk-core

在使用@oneauth/sdk-vue 之前，需要初始化@oneauth/sdk-core, [查看教程](https://github.com/CipherChina/sdk-core#readme)

## 开始使用@oneauth/sdk-vue

@oneauth/sdk-vue 提供了一个登录重定向的页面，和一个用于鉴权的导航守卫

你需要把登录重定向页面配置到路由当中。

并在需要鉴权的路由的 meta 上添加 auth 参数

1. 实例化@oneauth/sdk-core 和@oneauth/sdk-vue

```ts
import App from "./App.vue";
import router from "./router";

import OneAuth from "oneauth-sdk-core";
import OneAuthVue from "oneauth-sdk-vue";
const oneAuth = new OneAuth({
  issuer: `kang.oneauth.cn/oauth/v1`,
  clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
  redirectUri: `http://localhost:8080/callback`,
  scopes: ["openid", "profile", "email"],
});
```

2. 注入$oneauth

   把 @oneauth/sdk-core 实例注入到 Vue 的原型上

```ts
Vue.use(OneAuthVue, {
  oneAuth,
});
```

3. 添加登录按钮

在页面中添加一个按钮，并对其调用

```ts
this.$oneauth.login();
```

```html
<template>
  <button @click="login">login</button>
</template>
<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  @Component({
    components: {},
  })
  export default class App extends Vue {
    private login() {
      this.$oneAuth.login();
    }
  }
</script>
```

4. 添加登录重定向页面

从@oneauth/sdk-vue 得到登录重定向页面，并配置到路由中。

路由的路径需要与@oneauth/sdk-core 的实例化参数`redirectUri`一致。

```ts
import { LoginCallback } from "@oneauth/sdk-vue";

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
];
```

5. 添加路由鉴权和导航守卫

从@oneauth/sdk-vue 中获取导航守卫`navigationGuard`，并配置到路由中。

在需要鉴权的路由的 meta 中配置 auth 属性

这样，在打开该路由时都会检查是否登录了。

如果没有登录则会跳转到登录页。

登录完成后会跳转回来。

```ts
import { LoginCallback, navigationGuard } from "@oneauth/sdk-vue";

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
  {
    path: "/about",
    name: "About",
    meta: {
      auth: true,
    },
    component: () => import("../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach(navigationGuard);

export default router;
```
npm package: @oneauth/sdk-vue-next
Description: 需搭配@oneauth/sdk-core 使用
Latest version: 0.0.3

# @oneauth/sdk-vue-next

需搭配@oneauth/sdk-core 使用

## 安装

除了本 sdk，也需要安装@oneauth/sdk-core

```shell
npm i --save @oneauth/sdk-core @oneauth/sdk-vue-next
```

## 实例化@oneauth/sdk-core

在使用@oneauth/sdk-vue-next 之前，需要初始化@oneauth/sdk-core, [查看教程](https://github.com/CipherChina/sdk-core#readme)

## 开始使用@oneauth/sdk-vue-next

@oneauth/sdk-vue-next 提供了一个登录重定向的页面，和一个用于鉴权的导航守卫

你需要把登录重定向页面配置到路由当中。

并在需要鉴权的路由的 meta 上添加 auth 参数

1. 实例化@oneauth/sdk-core 和@oneauth/sdk-vue-next

```ts
import App from "./App.vue";
import router from "./router";

import OneAuth from "@oneauth/sdk-core";
import OneAuthVue from "@oneauth/sdk-vue-next";
const oneAuth = new OneAuth({
  issuer: `kang.oneauth.cn/oauth/v1`,
  clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
  redirectUri: `http://localhost:8080/callback`,
  scopes: ["openid", "profile", "email"],
});
```

2. 注入$oneauth

   把 @oneauth/sdk-core 实例注入到 Vue 的原型上

```ts
createApp(App).use(OneAuthVue, {
  oneAuth,
});
```

3. 添加登录按钮

在页面中添加一个按钮，并对其调用

```ts
this.$oneauth.login();
```

```html
<template>
  <button @click="login">login</button>
</template>
<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    name: "App",

    methods: {
      login() {
        this.$oneAuth.login();
      },
    },
  });
</script>
```

4. 添加登录重定向页面

从@oneauth/sdk-vue-next 得到登录重定向页面，并配置到路由中。

路由的路径需要与@oneauth/sdk-core 的实例化参数`redirectUri`一致。

```ts
import { LoginCallback } from "@oneauth/sdk-vue-next";

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
];
```

5. 添加路由鉴权和导航守卫

从@oneauth/sdk-vue-next 中获取导航守卫`navigationGuard`，并配置到路由中。

在需要鉴权的路由的 meta 中配置 auth 属性

这样，在打开该路由时都会检查是否登录了。

如果没有登录则会跳转到登录页。

登录完成后会跳转回来。

```ts
import { LoginCallback, navigationGuard } from "@oneauth/sdk-vue-next";

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
  {
    path: "/about",
    name: "About",
    meta: {
      auth: true,
    },
    component: () => import("../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach(navigationGuard);

export default router;
```